如何检测DOM元素内部的滚动变化及滚动量（原生JS实现）

完全理解你的需求——不需要引入jQuery，原生JS就足够搞定这个场景，而且非常轻量。下面是具体的实现步骤和代码示例：

核心思路 #

我们需要给目标<div>元素绑定scroll事件，每当用户在元素内部滚动时，这个事件就会触发。在事件处理函数中，我们可以通过元素的scrollTop和scrollLeft属性获取具体的滚动量，还能判断是否发生了滚动行为。

完整代码实现 #

<div id="box" style="width: 300px; height: 200px; overflow: auto; border: 1px solid #ccc;">
  <!-- 这里放足够长的内容，让元素可以滚动 -->
  <p style="height: 1000px;">测试滚动内容...</p>
</div>

<script>
// 1. 获取目标元素
const scrollBox = document.getElementById('box');

// 可选：记录初始滚动位置，用于对比是否发生滚动
let lastScrollTop = scrollBox.scrollTop;
let lastScrollLeft = scrollBox.scrollLeft;

// 2. 绑定scroll事件监听
scrollBox.addEventListener('scroll', function() {
  // 获取当前垂直滚动量（顶部被隐藏的像素数）
  const currentScrollTop = this.scrollTop;
  // 获取当前水平滚动量（左侧被隐藏的像素数）
  const currentScrollLeft = this.scrollLeft;

  // 判断是否发生了滚动
  if (currentScrollTop !== lastScrollTop || currentScrollLeft !== lastScrollLeft) {
    console.log('用户进行了滚动！');
    console.log(`垂直滚动量：${currentScrollTop}px`);
    console.log(`水平滚动量：${currentScrollLeft}px`);
    
    // 更新记录的滚动位置
    lastScrollTop = currentScrollTop;
    lastScrollLeft = currentScrollLeft;
  }
});
</script>

关键知识点解释 #

• scroll事件：当元素的滚动位置发生变化时触发，不管是鼠标滚轮、拖拽滚动条还是触摸滑动都会触发。
• scrollTop属性：返回元素内容顶部被滚动出可视区域的像素值，垂直滚动时用这个。
• scrollLeft属性：返回元素内容左侧被滚动出可视区域的像素值，水平滚动时用这个。
• 性能优化（可选）：scroll事件触发频率很高，如果你的处理逻辑比较复杂，建议使用节流函数来减少触发次数，避免性能问题。比如：

  function throttle(func, delay) {
    let timer = null;
    return function() {
      if (!timer) {
        timer = setTimeout(() => {
          func.apply(this, arguments);
          timer = null;
        }, delay);
      }
    };
  }
  
  // 用节流后的函数绑定事件
  scrollBox.addEventListener('scroll', throttle(function() {
    // 你的滚动处理逻辑
    console.log('滚动触发（节流后）');
  }, 100));
  

这样就可以完美实现你需要的功能，全程只用原生JavaScript，没有任何冗余依赖~

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