两个元素同步滚动演示

马黑黑

实现滚动同步使用到的属性：

1. Element.scrollTop - 可读写属性，可以获取或设置元素内容从其顶部边缘滚动的像素数。
2. Element.scrollHeight - 只读属性，是一个元素内容高度，包括由于溢出导致的视图中不可见内容。
3. Element.clientHeight - 只读属性，对于没有定义 CSS 或者内联布局盒子的元素为 0；否则，它是元素内部的高度（以像素为单位），包含内边距，但不包括边框、外边距和水平滚动条（如果存在）。

实现思路：

1. 获取滚动元素当前滚动位置（scrollTop）和元素内容高度（scrollHeight - clientHeight）的比例；

2. 将上述比例值应用于第二个元素，即根据此元素自己的滚动条实际高度计算出 scrollTop 属性值并驱动该值刷新。

同时应考虑到滚动事件是高发事件，可以设计一个滚动机制以减少CPU消耗，详见代码示例。

<style> /* 父元素 */ .pa { margin: 20px auto; width: 80vw; height: 90vh; display: flex; gap: 20px; } /* 子元素 */ .son { width: 50%; height: 100%; border: 1px solid #ccc; overflow: auto; } /* 孙元素 */ .grandson { height: 300%; background: linear-gradient(35deg, tan, beige, snow, beige, tan); } </style> <div class="pa"> <div id="son1" class="son"> <div class="grandson"></div> </div> <div id="son2" class="son"> <div class="grandson"></div> </div> </div> <script> let isScrolling = false; // 同步滚动逻辑 son1.addEventListener('scroll', () => scrolling(son1, son2)); son2.addEventListener('scroll', () => scrolling(son2, son1)); /* 滚动函数 */ function scrolling(el1, el2) { if (isScrolling) return; isSScrolling = true; const per = el1.scrollTop / (el1.scrollHeight - el1.clientHeight); el2.scrollTop = per * (el2.scrollHeight - el2.clientHeight); setTimeout(() => isScrolling = false, 10); } </script>

马黑黑

节流、防抖是滚动事件实际应用中常用到的，本示例没有做防抖功能，节流也是粗糙的，适用于小范围滚动，若是大型项目需要额外设计更为严格的节流防抖机制。