如何捕获Div容器的水平与垂直滚动事件？

当然可以做到啦！你现在的代码里有个小误区——scrollLeft()是用来获取或设置元素水平滚动位置的方法，不是绑定滚动事件的方式，所以没法触发你想要的左右滚动日志。咱们换个思路：通过记录每次滚动的位置变化，就能轻松区分水平和垂直方向的滚动行为了。

实现思路 #

核心逻辑是记录上一次的滚动位置，每次触发scroll事件时，将当前的scrollTop（垂直滚动位置）和scrollLeft（水平滚动位置）与上一次的值对比：

• 如果scrollTop发生变化，说明是垂直滚动
• 如果scrollLeft发生变化，说明是水平滚动
• 两种情况可能同时发生（比如斜着滚动），所以可以分别判断输出

完整代码示例 #

HTML结构

<div class="wrapper">
  <div class="content">
    <!-- 这里放你的内容 -->
  </div>
</div>

CSS样式

.wrapper{ 
  height: 300px; 
  width: 300px; 
  overflow: scroll; 
  border: 1px solid #ccc; /* 加个边框方便看容器范围 */
}
.content{ 
  height: 1000px; 
  width: 1000px; 
  background: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
              linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
  background-size: 20px 20px; /* 加个背景网格，滚动时更直观 */
}

JavaScript代码（jQuery版）

$(function(){
  // 初始化，记录初始滚动位置
  $('.content').data('lastScrollTop', 0);
  $('.content').data('lastScrollLeft', 0);

  $('.content').on('scroll', function() {
    const $this = $(this);
    const currentTop = $this.scrollTop();
    const currentLeft = $this.scrollLeft();
    const lastTop = $this.data('lastScrollTop');
    const lastLeft = $this.data('lastScrollLeft');

    // 判断垂直滚动
    if(currentTop !== lastTop){
      console.log(`垂直滚动：${currentTop > lastTop ? '向下滚动' : '向上滚动'}`);
      $this.data('lastScrollTop', currentTop);
    }

    // 判断水平滚动
    if(currentLeft !== lastLeft){
      console.log(`水平滚动：${currentLeft > lastLeft ? '向右滚动' : '向左滚动'}`);
      $this.data('lastScrollLeft', currentLeft);
    }
  });
});

代码说明 #

• 用jQuery的data()方法存储上一次的滚动位置，避免使用全局变量造成污染
• 每次滚动时分别对比垂直和水平的位置变化，能精准判断滚动方向
• 支持同时触发水平和垂直滚动的情况（比如斜着拖动滚动条），两种日志都会输出

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