在前端开发中，滚动条是一个非常常见的组件。然而，在实际开发中，许多情况下会出现多个滚动条并存的情况，如主体页面和侧边栏同时出现滚动条，这时候就需要一个称之为“主从滚动联动”的技术实现，以保证用户在滑动滚动条时两者的联动效果。本文将详细介绍 npm 包 react-master-slave-scroll 的使用方法。
安装
npm i react-master-slave-scroll --save
使用
这个 npm 包是基于 React 实现的，使用时需要引入相应的 React 包和组件：
import React from 'react';
import { MasterScroll, SlaveScroll } from 'react-master-slave-scroll';其中，MasterScroll 是主滚动条的组件，SlaveScroll 是从滚动条的组件。他们都有一个属性值 ref，用于在父子组件之间建立联系。
<MasterScroll ref={(scroll) => {this.masterScroll = scroll}}>
<div>主滚动条内容很长很长，需要滑动</div>
</MasterScroll>
<SlaveScroll bindScroll={this.masterScroll}>
<div>侧边栏内容也很长很长，需要滑动，在滚动主滚动条时两者不能阻塞</div>
</SlaveScroll>主滚动条被嵌套在父容器中，通常是整个页面，而从滚动条是另一个容器，如侧边栏，也在同一页面中。
在 MasterScroll 的 ref 中，我们并没有直接用字符串赋值给 this.masterScroll，而是使用了一个函数。这是因为在 React 中，父组件通过 ref 获取子组件时，一定要在 DOM 加载完成之后才可以，不然就拿不到正确的实例，而这个函数不是在组件渲染时就执行的，而是在组件挂载时才会执行。这样一来，我们就能通过 this.masterScroll 拿到正确的主滚动条实例。
而在 SlaveScroll 中，我们将 bindScroll 属性设置为了 this.masterScroll，也就是主滚动条的实例。这样，当主滚动条滑动时，从滚动条也将跟着滑动。
需要注意的是，当页面中同时存在多个从滚动条时，SlaveScroll 的 bindScroll 属性必须设置为相应的主滚动条实例，否则会出现多个从滚动条同时滚动的问题。
示例
下面是一个完整的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- ----------- - ---- ----------------------------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
----- --- -------------------------- -- -- --- -- --- ---
-
-
-------- -
------ -
---- ---------------- ---------
------------- ------------- -- - ----------------- - ------- ---
--- --- --- ---
----
--------------------------- ------ -- -
------ -
--- ------------
------
-----
--
---
-----
---------------
---- -------------- -------- ------- -------- --------- ---------
------------ -------------------------------
--- -- --- ---
----
------------------------- -------------- ------ -- -
------ -
--- ------------
------
-----
--
---
-----
--------------
------
------
--
-
-
------ ------- --------总结
在本篇文章中，我们介绍了 npm 包 react-master-slave-scroll 的使用方法，包括使用方法和注意事项，并给出了一个完整示例。使用该 npm 包可以方便地实现主从滚动联动功能，增强用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ea181e8991b448e7669