如何检测用户在无法滚动时的滚动尝试？（含iframe场景）

核心问题在于：点击iframe内视频播放后，scrollable-area的scroll事件未触发，导致iframe的pointer-events一直保持all状态，滚轮事件被iframe捕获，无法触发外层横向滚动逻辑。

修改方案 #

1. 滚轮事件触发时优先禁用iframe指针事件，确保外层滚动区域能捕获滚轮操作；
2. 保留点击/触摸滚动区域时启用iframe指针事件的逻辑，保证视频可正常点击播放；
3. 优化边界滚动判断逻辑，避免不必要的默认行为阻止。

修改后的完整代码 #

JavaScript代码

$(document).ready(function() {
  $('.scrollable-area').on('wheel', function(e) {
    // 滚动时强制禁用iframe指针事件，确保外层能捕获滚轮事件
    $('iframe').css('pointer-events', 'none');
    
    var scrollLeft = $(this).scrollLeft();
    var scrollWidth = $(this)[0].scrollWidth;
    var clientWidth = $(this).width();
    var maxScrollLeft = scrollWidth - clientWidth;
    var deltaY = e.originalEvent.deltaY;
    var deltaX = e.originalEvent.deltaX;
    var newScrollLeft = scrollLeft + deltaY + deltaX;

    // 仅在滚动未触达边界时阻止默认纵向滚动
    if ((deltaY > 0 && newScrollLeft < maxScrollLeft) || (deltaY < 0 && newScrollLeft > 0)) {
      e.preventDefault();
    }

    // 限制滚动范围，避免超出边界
    $(this).scrollLeft(Math.max(0, Math.min(newScrollLeft, maxScrollLeft)));
  });
});

// 点击/触摸滚动区域时，允许iframe响应指针事件（用于播放视频）
$('.scrollable-area').on("mousedown touchstart", function() {
  $('iframe').css('pointer-events', 'all');
});

CSS代码（无需修改）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.gallery-container {
  position: relative;
  width: 100%;
  height: 90vh;
  background-color: yellow;
  overflow: hidden;
}

.scrollable-area {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

.gallery-items {
  display: flex;
  min-width: 100%;
  height: 100%;
}

.gallery-item {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
}

.gallery-item img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.gallery-item iframe {
  background-color: blue;
  width: calc((16 / 9) * 90vh);
  pointer-events: none;
}

HTML代码（无需修改）

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

<div class="gallery-container">
  <div class="scrollable-area">
    <div class="gallery-items">
      <div class="gallery-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG">
      </div>
      <div class="gallery-item">
        <iframe src="https://player.vimeo.com/video/584985260" frameborder="0" allow="fullscreen"></iframe>
      </div>
      <div class="gallery-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/da/Sky_landscape.jpg">
      </div>
      <div class="gallery-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG">
      </div>
    </div>
  </div>
</div>

关键逻辑说明 #

• 滚轮事件触发时立即设置iframe的pointer-events:none：不管iframe是否处于播放状态，只要用户尝试滚动，就优先让外层滚动区域捕获事件；
• 保留mousedown/touchstart时启用iframe指针事件：确保用户点击视频时能正常触发播放；
• 移除原有scroll事件设置逻辑：滚轮事件已处理禁用iframe指针事件的操作，无需重复处理，同时避免滚动停止后可能出现的冲突。

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