基于滚动事件追踪指定Class的Div内滚动像素位置

算力阿峰

2026-4-30

解决指定Div内部滚动距离追踪的问题

没问题，我来帮你搞定这个需求！你现在要追踪的是.show-back这个Div内部的滚动距离，而不是页面整体的滚动，其实不用绕弯子计算元素到顶部的距离，直接监听目标元素自身的scroll事件就可以了——这才是最直接、适配响应式场景的方案。

核心思路说明

你之前混淆了页面整体滚动和元素内部滚动的概念：页面滚动是整个浏览器窗口的滚动，而元素内部滚动是该元素自身内容的滚动，两者是完全独立的。所以不需要计算元素到页面顶部的距离，直接监听目标元素的滚动事件，就能精准拿到它内部的滚动值。

修改后的完整代码

CSS 部分（给目标元素添加滚动容器样式）

首先要确保.show-back有固定高度且内容超出时显示滚动条，否则不会触发滚动事件：

.another-element {
  height: 300px;
  width: 100%;
  background: red;
}

.show-back {
  height: 400px; /* 设置固定高度，让内容超出后出现滚动条 */
  overflow: auto; /* 内容超出时显示滚动条 */
  padding: 10px; /* 可选，优化内容显示 */
}

JavaScript 部分（监听目标元素的滚动事件）

$(document).ready(function(){
  // 获取目标元素
  const $targetDiv = $('.show-back');
  
  // 监听目标元素的内部滚动事件
  $targetDiv.scroll(function(){
    // 获取该元素内部的滚动距离（从元素顶部到可见内容顶部的距离）
    const innerScrollDistance = $(this).scrollTop();
    console.log('Div内部滚动距离:', innerScrollDistance);
  });
  
  // 如果你确实需要获取该元素到页面顶部的距离（用于其他逻辑），可以这样动态获取：
  const elementToTopDistance = $targetDiv.offset().top;
  console.log('元素到页面顶部的距离:', elementToTopDistance);
});

HTML 部分（保持原结构即可）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="another-element">
</div>
<div class="show-back">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit purus cursus, sodales tortor vestibulum, fermentum purus. Donec vel venenatis augue. Fusce malesuada cursus ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec et leo ac ex ultricies elementum sit amet non arcu. Etiam quis magna odio. Nam quis nibh elementum, tincidunt felis vitae, tincidunt lorem. Nam ac diam et nisl facilisis ornare. In eget dui vel quam interdum consectetur non sit amet urna. In hac habitasse platea dictumst. Pellentesque a elit id lacus hendrerit vestibulum ac in ligula. Cras hendrerit neque sit amet pretium sodales. Praesent consectetur odio vitae est bibendum, nec gravida elit vehicula. Ut quis odio vitae mi dictum iaculis quis vel ipsum. Nam suscipit aliquam sollicitudin.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit purus cursus, sodales tortor vestibulum, fermentum purus. Donec vel venenatis augue. Fusce malesuada cursus ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec et leo ac ex ultricies elementum sit amet non arcu. Etiam quis magna odio. Nam quis nibh elementum, tincidunt felis vitae, tincidunt lorem. Nam ac diam et nisl facilisis ornare. In eget dui vel quam interdum consectetur non sit amet urna. In hac habitasse platea dictumst. Pellentesque a elit id lacus hendrerit vestibulum ac in ligula. Cras hendrerit neque sit amet pretium sodales. Praesent consectetur odio vitae est bibendum, nec gravida elit vehicula. Ut quis odio vitae mi dictum iaculis quis vel ipsum. Nam suscipit aliquam sollicitudin.
</div>

为什么这个方案更靠谱？

精准追踪内部滚动：直接监听目标元素的scroll事件，拿到的scrollTop()就是该元素内部的滚动距离，完全不受页面其他元素滚动的影响。
适配响应式场景：如果需要获取元素到页面顶部的距离，offset().top是动态计算的，会随着页面布局变化自动更新，不需要硬写固定像素值。
性能更优：相比监听window的scroll事件再做额外计算，直接监听目标元素的滚动事件减少了不必要的计算开销。

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