Windows平台Chrome中水平scroll事件无法触发问题

你碰到的这个跨系统Chrome的滚动事件差异，其实是Windows Chrome默认的横向滚动行为导致的，我来帮你拆解原因和解决办法：

为什么会出现这个差异？ #

在Windows版Chrome里，当你用鼠标滚轮（没按Shift）滚动时，浏览器会默认把横向滚动的操作优先交给页面整体（如果页面有纵向滚动条的话），不会传递给内部的overflow:scroll容器。只有按住Shift键，滚轮的横向滚动指令才会被定向到当前聚焦的内部容器，这就是Shift能触发事件的核心原因。

而Mac版Chrome会自动识别鼠标悬停的容器，优先把滚动事件分配给它，不管是横向还是纵向，所以不会有这个问题。

几个可行的解决方案 #

1. 让容器可聚焦并自动获取焦点

普通div默认不能被聚焦，我们给它加个tabindex属性，再在鼠标悬停时让它获取焦点，这样浏览器就会优先把滚动事件传给它：

// 给容器添加tabindex，允许被聚焦
$('.element-1').attr('tabindex', '0');
// 鼠标悬停时让容器获取焦点
$('.element-1').on('mouseenter', function() {
  $(this).focus();
});

2. 手动监听wheel事件并处理滚动

直接接管滚轮事件，阻止默认行为，手动调整容器的滚动位置，同时触发scroll事件：

$('.element-1').on('wheel', function(e) {
  // 阻止浏览器默认的页面滚动行为
  e.preventDefault();
  // 根据滚轮的横向偏移量调整容器的scrollLeft
  $(this).scrollLeft($(this).scrollLeft() + e.originalEvent.deltaX);
  // 手动触发scroll事件，保证原有的监听逻辑生效
  $(this).trigger('scroll');
});

3. 使用CSS的overscroll-behavior属性

这个CSS属性可以限制滚动行为不传递给父元素，让浏览器优先处理当前容器的滚动：

.element-1 {
  /* 保留你原有的样式 */
  overscroll-behavior: contain;
}

这个属性兼容性不错，现代浏览器都支持，是最简单的方案之一。

整合后的测试代码 #

把上面的方案整合到你的代码里，示例如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .element-1 {
      background-color: blue;
      width: 600px;
      height: 200px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      overflow: scroll;
      overscroll-behavior: contain;
      tabindex: 0;
    }
    .element-2 {
      width: 1200px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="element-1">
    <div class="element-2"></div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('.element-1').on('scroll', (event) => { console.log('im scrolling'); });
    
    $('.element-1').on('mouseenter', function() {
      $(this).focus();
    });
  </script>
</body>
</html>

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