什么是 reactscroller？
reactscroller 是一个基于 React 的滚动组件，支持水平和垂直滚动，并且可以非常自定义化。它比较适合需要大量数据的虚拟滚动场景，例如聊天记录、日历等。
安装
npm install reactscroller
使用方法
基本使用
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------- ---- ---------------
----- ---- - ------------ ------- ---- -- --- -- -- ----- ------ -- ----
-------- ------------- -
------ -
---------------
-------------- -- -
---- ---------- -----------------------------
---
----------------
--
-
------ ------- -----------自定义样式
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------- ---- ---------------
----- ---- - ------------ ------- ---- -- --- -- -- ----- ------ -- ----
-------- ------------- -
------ -
--------------
--------------------
--------------------
-------- ------- --- --
------------ ----------- ------ --
-----------------
-
-------------- -- -
---- ---------- -----------------------------
---
----------------
--
-
------ ------- -----------事件
reactscroller 支持三个事件：
- onEndReached(): 到达底部或侧边时触发；
- onScroll(position: number): 在滚动时触发，position 是当前的滚动位置；
- onScrollEnd(position: number): 滚动结束时触发，position 是当前的滚动位置。
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ ------------- ---- ---------------
----- ---- - ------------ ------- ---- -- --- -- -- ----- ------ -- ----
-------- ------------- -
----- ---------- ------------ - -----------
-------- --------------- ------- -
--------------
-
------ -
--------------
--------------------
--------------------
-------- ------- --- --
------------ ----------- ------ --
-----------------------
---------------- -- -------------------
-
-------------- -- -
---- ---------- -----------------------------
---
----------------
--
-
------ ------- -----------说明
reactscroller 是个比较底层的组件，可以通过自定义样式来实现更多的效果，但是也需要你自己写一些代码。如果你不想自己实现，可以看看已有的扩展库，例如 react-virtualized、react-window 等。
结尾语
reactscroller 是一个非常灵活的组件，在处理大量数据的滚动场景下非常实用。如果你需要更多的自定义工作，它也是一个非常好的入手点。就像上面说的，你也可以使用已有的扩展库来实现更多效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8d81e8991b448db4e7