js如何实现两个滚动条同步滚动

最新推荐文章于 2025-06-27 10:17:25 发布

跳恰恰的夫子

最新推荐文章于 2025-06-27 10:17:25 发布

阅读量9.3k

点赞数 9

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44840212/article/details/93761424

本文详细介绍了如何通过JavaScript实现两个区域竖向滚动条的同步滚动效果。解释了滚动比例计算方法，利用clientHeight和scrollHeight属性，以及mouseover事件触发scroll事件的原理，避免了滚动条逆流现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下图所示：实现两个区域竖向滚动条同步滚动
在这里插入图片描述
页面结构布局和样式如下：（为了一张截图展示，结构里p标签都有删减，可随意添加能出滚动条就可以）

下图是js代码：代码没几行，注意下边注释，涉及同步滚动比例计算
注释：1、scale为滚动条滚动比例（左边可滚动最大高度/右边可滚动最大高度）
2、clientHeight和offsetHeight均可获取元素高度，这里用clientHeight是因为这个属性不包含横向滚动条的高度
3、scrollHeight是left/right里内容的高度，它和(.left/.right div).clientHeight可能会有区别（例如此例子中p标签有margin值上下都为16px），那么clientHeight不会把最上边的margin-top和最下边的margin-bottom计算进去导致比scrollHeight高度少32px, .left/.right div真实占用空间是包含上下margin的。（当然你也可以用其他方法解决这个高度问题）
4、left/right的mouseover事件来开启/停止当前鼠标所在区域的scroll事件，因为同步滚动只能让一边跟随另一边滚动而滚动，否则两边同时滚动同时改变另一边的scroll, 如果两边不一样高就会导致滚动条缓慢逆流的现象，滚动条拉下来它自己又逆流回去。