今天想简单的说一下,两个盒子同步滚动的思路---按比例滚动
-
最重要的需要知道比例是如何计算的? 比例 = (左边滚动内容元素的高度 - 左边容器的高度)/ (右边滚动内容元素的高度 - 右边边容器的高度)
-
我们需要知道滚动内容元素的高度是如何计算的 ?滚动内容元素的高度 = 找到滚动元素的scrollHeight 属性
-
我们需要知道容器的高度是如何计算的 ? 容器的高度 = 找到容器的offsetHeight
插入提示:offsetHeight 和 clientHeight 区别
- clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度
- offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。
4. 我们知道比例之后,就可以通过监听滚动事件 ,在某一个滚动事件触发的时候,通过scrollTop,来确定另外容器的scrollTop值,即可实现同步滚动的效果
插入提示:scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度
例如左边容器滚动,可以获取左边容器的scrollTop 如 左边容器.scrollTop
右边容器.scrollTop = 左边容器.scrollTop * 比例
******上干货,详细的看代码,逻辑都有注释的希望可以帮到你!!!!
一、页面布局
<div id="conte