在前端开发中，实现滚动条同步其它元素的滚动也是一个常见需求。这种需求不仅能让用户更方便地浏览视图，还能提高页面的交互性和用户体验。作为开发者，我们可以通过手动监听滚动事件并计算滚动位置来实现滚动条同步，但是这样的方式非常麻烦。幸运的是，npm 上有一个叫做 scroll-syncer 的包，它能够使滚动条同步变得轻松简单。
scroll-syncer 的安装与基本使用
安装 scroll-syncer 也非常简单，只需要在终端执行以下命令即可：
npm install scroll-syncer --save
然后在需要使用的页面中引入 scroll-syncer：
import ScrollSyncer from 'scroll-syncer';
接下来，我们要同步两个元素的滚动，假设它们的 DOM 结构如下：
-- -------------------- ---- -------
---- -------------
----
-------------
-------------
-------------
-------------
-------------
-----
------
---- --------------
---- ----------------
-------------
-------------
-------------
-------------
-------------
------
------其中，左侧的列表项高度固定，右侧的文本内容高度可变。现在我们要实现的效果是：当左侧列表项滚动时，右侧的文本内容也跟随同步滚动。下面我们就可以用 scroll-syncer 来实现：
-- -------------------- ---- ------- ----- ---- - -------------------------------- ----- ----- - --------------------------------- ----- ------ - --- ------------------ ------ - ----------------- ------ -- -------- --------------- ----- -- -------- --- -- --------- ----------------
经过以上的配置和监听，我们就实现了左侧区域和右侧区域的滚动同步。接下来，我们再来做一些更进一步的定制化配置。
scroll-syncer 的高级使用
除了基本用法，scroll-syncer 还提供了一些高级功能来满足更多的需求。
指定同步容器
默认情况下，scroll-syncer 的同步容器是两个传入的元素本身。但是，有时候我们希望同步容器是它们的父级或者祖先元素，这时候就需要指定同步容器。我们可以在实例化同步器时传入第三个参数：
const syncer = new ScrollSyncer(left, right, {
container: document.querySelector('.top'),
});这样，当我们在 top 容器内滚动时，left 和 right 就会同步滚动。
禁用/启用同步
如果需要在滚动的时候禁用同步，可以通过下面的代码实现：
syncer.disable();
需要恢复同步时，可以使用以下代码：
syncer.enable();
监听滚动事件
当我们需要监控滚动事件时，也可以通过 scroll-syncer 提供的 API 来实现。这里以监听 left 区域的滚动为例：
syncer.on('scroll:left', (event) => {
console.log('触发 left 区域的滚动事件！');
console.log(event);
});可以看到，我们通过 syncer.on 方法指定了监听的事件类型（scroll:left），并在回调函数中实现响应逻辑。
以上就是 scroll-syncer 的详细使用教程，希望对大家有所帮助。如果你在开发过程中需要实现滚动同步，可以考虑使用 scroll-syncer 来提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c081e8991b448e3110