如何让iframe在水平滚动区域中与其他媒体元素表现一致并适配尺寸？

问题描述 #

媒体画廊在光标悬停时，向下滚动可触发水平滚动，但当光标位于iframe区域时，滚动功能失效。尝试过滚动时禁用pointer events，但导致视频播放按钮无法点击。同时需要让iframe自动匹配视频尺寸并适配画廊的整体高度。

一、修复iframe区域的滚轮水平滚动问题 #

iframe会优先捕获滚轮事件，导致父元素的wheel事件无法触发。我们可以通过临时遮罩层的方式解决：只在滚轮动作时拦截事件，平时不影响视频的交互操作。

修改步骤： #

1. 给包含iframe的.gallery-item添加相对定位，用于承载遮罩层
2. 动态生成透明遮罩层，默认隐藏，仅在鼠标悬停时显示
3. 将原有的滚动逻辑绑定到遮罩层上，保证事件能被父容器捕获

修改后的代码： #

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">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/da/Sky_landscape.jpg">
      </div>
      <div class="gallery-item iframe-wrapper">
        <div class="iframe-mask"></div>
        <div class="video-container">
          <iframe src="https://player.vimeo.com/video/584985260" frameborder="0" allow="fullscreen"></iframe>
        </div>
      </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>

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;
}

/* iframe相关样式 */
.iframe-wrapper {
  position: relative;
  height: 100%;
}

.video-container {
  position: relative;
  width: auto;
  min-width: 600px;
  height: 0;
  padding-top: 56.25%; /* 16:9比例，4:3视频改为75% */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.iframe-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: none;
  z-index: 10;
}

.iframe-wrapper:hover .iframe-mask {
  display: block;
}

JS

$(document).ready(function() {
  // 封装滚动逻辑为复用函数
  function handleHorizontalScroll(e, target) {
    var scrollLeft = $(target).scrollLeft();
    var width = $(target)[0].scrollWidth - $(target).width();
    var deltaY = e.originalEvent.deltaY;
    var deltaX = e.originalEvent.deltaX;
    var newScrollLeft = scrollLeft + deltaY + deltaX;
    
    if ((deltaY > 0 && newScrollLeft < width) || (deltaY < 0 && newScrollLeft > 0)) {
      e.preventDefault();
    }
    
    $(target).scrollLeft(Math.max(0, Math.min(newScrollLeft, width)));
  }

  // 绑定普通区域的滚动事件
  $('.scrollable-area').on('wheel', function(e) {
    handleHorizontalScroll(e, this);
  });

  // 绑定遮罩层的滚动事件，指向父容器
  $('.iframe-mask').on('wheel', function(e) {
    e.stopPropagation();
    handleHorizontalScroll(e, $(this).closest('.scrollable-area')[0]);
  });
});

二、让iframe适配画廊高度并保持视频比例 #

通过padding-top百分比实现宽高比自适应，让iframe始终匹配画廊高度，同时保持视频的原始比例：

• 16:9比例对应padding-top: 56.25%
• 4:3比例对应padding-top: 75%
• 可根据实际视频比例调整数值

该方案让iframe外层容器通过padding-top撑起高度，再让iframe绝对定位填充整个容器，既保证了视频比例，又能适配画廊的90vh高度。

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