原生JS控制多个滚动条同步跟随滚动效果(5)

结构示例如下：

通过我的观察推论与实践验证，已经确定下来了它们之间的关系，很简单，就是最基本的加减法运算：

滚动条的最大滚动高度(scrollTopMax) = 滚动容器内容的高度(即子元素高度ch) - 滚动容器本身的高度(即容器元素高度ph)

即

也就是说，如果已经确定了滚动容器内容的高度(即子元素高度ch)与滚动容器本身的高度(即容器元素高度ph)，那么就一定能确定滚动条的最大滚动高度( scrollTop )，而这两个高度值基本上都是可以获取到的，所以就能得到 scrollTop

因此，想要让两个滚动元素容器等比例上下滚动，即其中一个元素滚到头或者滚到底，另外一个元素也能对应滚到头和滚到底，那么只要得到这两个滚动容器元素之间的 scrollTop 最大值的比例( scale )就行了。

确定了 scale 之后，实时滚动时，只需要获取主动滚动容器元素的 scrollTop1 ，就能得到另外一个跟随滚动的容器元素对应的 scrollTop2 ：

思路弄清晰了，写代码就是很容易的事情了，效果如下：

很顺滑~

小结

上述本上已经实现了需求，可能在实践过程中还需要根据实际情况来进行一定的修改，例如如果你编写一个 markdown 的在线编辑和预览页面，就需要根据输入内容的高度实时更新 scale 值，不过主体已经搞定，小修小改就没什么难度了。

另外，本文所述不仅是针对两个滚动容器元素的跟随滚动，同时也可扩展开来，更多的元素间的跟随滚动都是可以根据本文思路来实现的，本文只是为了方便讲解而具体到了两个元素上。

总结

以上所述是小编给大家介绍的原生JS控制多个滚动条同步跟随滚动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对黑区网络的支持！