在前端开发中，有时候会遇到需要将页面上的两个 div 元素的滚动位置进行同步的情况。例如，在一个包含了两个独立的区域的网页中，当用户向下滚动其中一个区域时，另一个区域也需要跟随滚动以保持同步。
本文将介绍如何使用 JavaScript 和 CSS 来实现这种同步滚动效果，并提供一些示例代码来帮助读者快速上手。
方法一：监听 scroll 事件
首先，我们可以为需要同步滚动的两个 div 元素分别添加一个 scroll 事件监听器。这样，每当用户滚动其中一个元素时，我们就可以获取到该元素的滚动距离，并将该距离应用到另一个元素中。
HTML 代码如下：
<div class="wrapper"> <div class="left"></div> <div class="right"></div> </div>
CSS 代码如下：
-- -------------------- ---- ------- -------- - -------- ----- - ------ ------ - ------ ---- ------- ------ ----------- ------- -
JavaScript 代码如下：
-- -------------------- ---- ------- ----- ---- - -------------------------------- ----- ----- - --------------------------------- ------------------------------- ------- -- - --------------- - ----------------------- --- -------------------------------- ------- -- - -------------- - ----------------------- ---
在上面的代码中，我们为左侧和右侧两个 div 元素分别添加了一个 scroll 事件监听器。每当用户滚动其中一个元素时，我们就将该元素的滚动距离（scrollTop）应用到另一个元素中。
值得注意的是，这种方法仅适用于需要同步滚动的两个 div 元素高度相等的情况。如果两个元素高度不一致，则可能会出现滚动位置不准确的问题。
方法二：使用 CSS position 属性
除了上面介绍的方法之外，我们还可以使用 CSS 的 position 属性来实现同步滚动效果。具体来说，我们可以将需要同步滚动的两个 div 元素包装在一个父容器中，并为它们设置 position: fixed; 和 overflow-y: scroll; 属性。这样，在用户滚动其中一个元素时，另一个元素也会随之滚动。
HTML 代码如下：
<div class="wrapper"> <div class="left"></div> <div class="right"></div> </div>
CSS 代码如下：
-- -------------------- ---- ------- -------- - --------- --------- - ------ ------ - --------- ------ ------ ---- ------- ------ ----------- ------- - ----- - ----- -- - ------ - ------ -- -
在上面的代码中，我们为左侧和右侧两个 div 元素设置了 position: fixed; 属性，使它们脱离文档流并相对于父容器进行定位。然后，我们通过设置 left 和 right 属性将左侧元素固定在屏幕左侧，将右侧元素固定在屏幕右侧。
JavaScript 代码不再需要，因为同步滚动效果是通过 CSS 实现的。
结论
本文介绍了两种实现同步滚动效果的方法：监听 scroll 事件和使用 CSS position 属性。这些方法都比较简单易懂，适用于大多数情况。
当然，如果你需要更复杂的同步滚动效果，例如支持不同高度的元素、动画效果等，就需要更深入地研究相关的 JavaScript
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25816