如何让滚动div外部的div实现跟随效果？附示例代码

你想要的效果是：当内部带滚动条的红色div滚动时，外面的绿色小方块跟着同步滚动对吧？其实核心逻辑很简单——监听滚动容器的滚动事件，实时更新外部元素的位置，下面给你具体的实现方案：

核心思路 #

1. 给外部跟随元素的父容器设置position: relative，确保绝对定位的跟随元素能基于这个父容器定位，避免乱跑；
2. 监听内部滚动容器的scroll事件，获取它的滚动距离scrollTop；
3. 把这个滚动距离同步应用到外部跟随元素的位置上（推荐用transform: translateY，性能比直接改top更好）。

完整代码示例 #

<!-- 父容器：设置relative，让绿色元素基于它定位 -->
<div style="position: relative; width: 300px;">
  <!-- 外部跟随元素 -->
  <div id="follower" style="position: absolute; left: 8px; top: 0; width:40px; height: 40px; background: green; z-index: 200"></div>
  
  <!-- 滚动容器的父元素 -->
  <div style="background: black; height: 10000px; width: 300px">
    <!-- 带滚动条的容器 -->
    <div id="scrollContainer" style="background: red; width: 200px; height: 500px; overflow-y: scroll">
      <!-- 长内容，用来触发滚动 -->
      <div style="background: blue; height: 1000px; padding: 10px;">
        <textarea style="width: 100%; height: 100%;">这里是长内容，滚动我看看绿色方块的跟随效果~</textarea>
      </div>
    </div>
  </div>
</div>

<script>
// 获取元素
const scrollContainer = document.getElementById('scrollContainer');
const follower = document.getElementById('follower');

// 监听滚动事件
scrollContainer.addEventListener('scroll', function() {
  // 获取滚动距离
  const scrollTop = this.scrollTop;
  // 同步更新跟随元素的位置：用transform性能更优
  follower.style.transform = `translateY(${scrollTop}px)`;
  
  // 如果不想用transform，也可以直接改top（但性能稍差）：
  // follower.style.top = `${scrollTop}px`;
});
</script>

关键细节说明 #

• 定位上下文：给父容器加position: relative是关键，否则绿色元素会相对于整个文档定位，滚动时容易偏离预期位置；
• 性能优化：用transform: translateY代替修改top，因为transform属于合成层操作，不会触发页面重排，滚动时更流畅；
• 防抖优化（可选）：如果滚动时觉得事件触发太频繁，可以加个防抖函数减少触发次数，比如：

  let debounceTimer;
  scrollContainer.addEventListener('scroll', function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      const scrollTop = this.scrollTop;
      follower.style.transform = `translateY(${scrollTop}px)`;
    }, 10);
  });
  

内容的提问来源于stack exchange，提问作者Conanap