前端技术日新月异，越来越多的工具包涌现出来。其中，frontend-collective-react-dnd-scrollzone 是一款非常实用的 React 拖拽滚动组件。下面我们来一起学习如何使用它。
安装
你可以通过 npm 来安装官方的 frontend-collective-react-dnd-scrollzone:
npm install --save frontend-collective-react-dnd-scrollzone
基本使用
在 App.js 中引入 frontend-collective-react-dnd-scrollzone:
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- - ---- ------------
------ - ------------ - ---- --------------------------
------ ---------- ---- -------------------------------------------
----- --- - -- -- -
---
----- ------- --------- - ----------
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
---
----- -------- - ----------- ----------- -- -
----- -------- - -----------------
------------------ -- -
----- -------- - ---------------
-------------------------- ---
--------------------------- -- ----------
------ ---------
---
--
------ -
------------ ---------------------- ---------------------------- -------
------------
----------------- ------ -- -
---- ------------- -------- -------- ----- ---
-----------
------
---
-------------
--------------
--
--
------ ------- ----这个 ScrollZone 包含初始的 items 数组，以及一个 moveItem 函数，用于处理拖拽事件。当你启用 ScrollZone 时，你会发现在页面中滑动时，鼠标依然会触发拖拽事件，这是因为我们已经使用了 react-dnd，并且选择了 react-dnd-touch-backend 作为后端。
实现拖拽滚动
要启用拖拽滚动行为，你需要给 ScrollZone 组件添加 onScrollEnd 属性，并将其设置为一个回调函数：
const handleScrollEnd = () => {
console.log('Scrolling has ended!');
};
<ScrollZone onScrollEnd={handleScrollEnd}>
...
</ScrollZone>现在，我们需要在 moveItem 函数中实现拖拽滚动行为。具体做法是在每次拖拽移动时，检查鼠标位置，如果鼠标接近 ScrollZone 的顶部或底部，则触发滚动行为。
实现滚动行为的代码如下：
-- -------------------- ---- -------
----- -------- - ----------- ----------- ------------- -- -
-- --------------- -
-------
-
----- -------------- - ----------------------
----- - ---- ------ - - ---------------------------------------
----- ------------- - --- - ---------------
----- ---------------- - ------ - ---------------
-- -------------- - --------------------------- -
------------------------ -- ----------------
- ---- -- ----------------- - --------------------------- -
------------------------ -- ----------------
-
---
--我们需要检查 clientOffset 参数，如果为 null，则说明鼠标已经释放，即不需要滚动。而通过 scrollZoneRef.current，我们可以获得当前 ScrollZone 的 DOM 元素，然后通过 getBoundingClientRect() 来获取该元素的位置信息。通过判断内容位置与鼠标位置之间的距离，如果小于一定值，就可以发出滚动事件了。在这个例子中，我们限制了检查的区域为距离 ScrollZone 边界 10px 左右的区域。
最后，我们在 ScrollZone 上编写 ref 回调来获得 scrollZoneRef 对象，需要注意的是，这只有应用了 onScrollEnd 属性之后才能生效。
const scrollZoneRef = useRef(null);
<ScrollZone onScrollEnd={handleScrollEnd} ref={scrollZoneRef}>
...
</ScrollZone>完整的 moveItem 函数如下：
-- -------------------- ---- -------
----- -------- - ----------- ----------- ------------- -- -
-- --------------- -
-------
-
----- -------------- - ----------------------
----- - ---- ------ - - ---------------------------------------
----- ------------- - --- - ---------------
----- ---------------- - ------ - ---------------
-- -------------- - --------------------------- -
------------------------ -- ----------------
- ---- -- ----------------- - --------------------------- -
------------------------ -- ----------------
-
----- -------- - -----------------
------------------ -- -
----- -------- - ---------------
-------------------------- ---
--------------------------- -- ----------
------ ---------
---
--示例
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ------ - --------- ------ - ---- --------
------ - ----------- - ---- ------------
------ - ------------ - ---- --------------------------
------ ---------- ---- -------------------------------------------
----- --------------- - ---
----- -------------------------- - ---
----- --- - -- -- -
----- ------- --------- - ----------
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
---
----- -------- - ----------- ----------- ------------- -- -
-- --------------- -
-------
-
----- -------------- - ----------------------
----- - ---- ------ - - ---------------------------------------
----- ------------- - --- - ---------------
----- ---------------- - ------ - ---------------
-- -------------- - --------------------------- -
------------------------ -- ----------------
- ---- -- ----------------- - --------------------------- -
------------------------ -- ----------------
-
----- -------- - -----------------
------------------ -- -
----- -------- - ---------------
-------------------------- ---
--------------------------- -- ----------
------ ---------
---
--
----- --------------- - -- -- -
---------------------- --- ---------
--
----- ------------- - -------------
------ -
------------ ---------------------- ---------------------------- -------
----------- ----------------------------- --------------------
----------------- ------ -- -
----
-------------
--------
-------- ------
---------------- ----- - - --- - - ------ - --------
--
-
-----------
------
---
-------------
--------------
--
--
------ ------- ----总结
在本文中，我们学会了如何使用 frontend-collective-react-dnd-scrollzone 这个拖拽滚动组件，实现了拖拽滚动的功能，并详细地讲解了实现的细节和示例代码，希望对于想要实现类似效果的读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad03b5cbfe1ea0610bae