如何解决TailwindCSS+jQuery实现的横向滚轮滚动异常问题？

核心原因：当页面本身存在垂直滚动空间时，浏览器会优先响应页面的垂直滚动，不会将滚轮事件传递给横向滚动容器。打开控制台后页面高度缩短，页面无垂直滚动条，滚轮事件才会触发容器的横向滚动逻辑。

解决方案 #

修改JS代码，添加滚动空间判断，仅在容器可横向滚动时阻止页面默认滚动行为，同时确保容器横向滚动正常：

$('#imageContainer').on('wheel', function(e) {
  const $container = $(this);
  const containerEl = $container[0];
  // 判断容器是否还有横向滚动的空间
  const canScrollLeft = containerEl.scrollLeft > 0;
  const canScrollRight = containerEl.scrollLeft < containerEl.scrollWidth - containerEl.clientWidth;

  // 根据滚轮方向和滚动空间决定是否阻止默认行为
  if ((e.originalEvent.deltaY > 0 && canScrollRight) || (e.originalEvent.deltaY < 0 && canScrollLeft)) {
    e.preventDefault();
    // 调整滚动步长（*2可让滚动更顺畅，可根据需求修改）
    $container.scrollLeft($container.scrollLeft() + e.originalEvent.deltaY * 2);
  }
});

额外优化建议 #

1. 给容器添加tabindex="0"，确保容器可以通过键盘聚焦（提升 accessibility）：

<div id="imageContainer" class="..." tabindex="0">
  <!-- 图片内容 -->
</div>

2. 若希望鼠标悬浮在容器上时完全禁用页面垂直滚动，可添加鼠标进出事件：

$('#imageContainer')
.on('wheel', function(e) {
  e.preventDefault();
  $(this).scrollLeft($(this).scrollLeft() + e.originalEvent.deltaY * 2);
})
.on('mouseenter', function() {
  $('body').css('overflow', 'hidden');
})
.on('mouseleave', function() {
  $('body').css('overflow', 'auto');
});

完整代码示例 #

HTML #

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <div id="imageContainer" class="image-container w-[35dvh] h-[60dvh] bg-white mx-6 mt-6 overflow-x-scroll flex snap-x snap-mandatory scroll-smooth" tabindex="0">
    <img src="https://via.placeholder.com/400x600/ff7f7f/333333?text=Image+1" alt="图片1" class="snap-start">
    <img src="https://via.placeholder.com/400x600/7f7fff/333333?text=Image+2" alt="图片2" class="snap-start">
    <img src="https://via.placeholder.com/400x600/7fff7f/333333?text=Image+3" alt="图片3" class="snap-start">
  </div>
</body>

JavaScript #

$('#imageContainer').on('wheel', function(e) {
  const $container = $(this);
  const containerEl = $container[0];
  const canScrollLeft = containerEl.scrollLeft > 0;
  const canScrollRight = containerEl.scrollLeft < containerEl.scrollWidth - containerEl.clientWidth;

  if ((e.originalEvent.deltaY > 0 && canScrollRight) || (e.originalEvent.deltaY < 0 && canScrollLeft)) {
    e.preventDefault();
    $container.scrollLeft($container.scrollLeft() + e.originalEvent.deltaY * 2);
  }
});

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