如何仅在小屏幕禁用iframe滚动，大屏保留滚动？（仿Musescore效果）

核心思路 #

通过父容器包裹iframe，结合CSS媒体查询控制容器滚动状态，再用JavaScript阻止小屏设备上的滚动触发事件，既禁用滚动又保留播放控件的交互功能。

实现代码 #

HTML结构

<div id="iframe-container">
  <iframe 
    id="musescore-iframe"
    src="https://musescore.com/user/4534311/scores/8352662/embed" 
    frameborder="0" 
    allowfullscreen 
    allow="autoplay; fullscreen"
    style="width:100%; height:100%; border:none;"
  ></iframe>
</div>

CSS样式

#iframe-container {
  width: 100%;
  height: 88vh;
  overflow: hidden;
  position: relative;
}

#musescore-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 大屏设备（≥768px）允许容器滚动 */
@media (min-width: 768px) {
  #iframe-container {
    overflow: auto;
  }
}

JavaScript逻辑

const container = document.getElementById('iframe-container');

function blockUnwantedScroll(e) {
  // 判断当前是否为小屏设备
  if (window.innerWidth < 768) {
    // 阻止滚轮和触摸滑动事件触发滚动
    if (['wheel', 'touchmove'].includes(e.type)) {
      e.preventDefault();
    }
  }
}

// 给容器绑定事件监听，阻止小屏时的滚动行为
container.addEventListener('wheel', blockUnwantedScroll, { passive: false });
container.addEventListener('touchmove', blockUnwantedScroll, { passive: false });

关键说明 #

1. 跨域兼容：由于iframe属于第三方域名，无法直接操作其内部DOM，通过监听父容器的滚动事件来间接阻止iframe滚动，避免跨域权限问题。
2. 交互保留：没有使用pointer-events: none，因此播放控件的点击、交互功能完全正常。
3. 响应式适配：媒体查询自动切换容器的滚动状态，结合JS事件拦截，实现大屏允许滚动、小屏禁用滚动的效果。

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