在 iframe 具有焦点时阻止父级滚动答案

【问题标题】：Keep parent from scrolling while iframe has focus在 iframe 具有焦点时阻止父级滚动
【发布时间】：2013-11-29 05:59:10
【问题描述】：

我希望在专注于 iframe 时使用鼠标滚轮时防止父级滚动。这仅在达到 iframe 滚动限制时发生。它太烦人了。我发现了类似的问答，但不是鼠标滚轮。滚动条不会导致父级滚动，只有鼠标滚轮。

【问题讨论】：

您是否可以控制 iframe 中的代码？还是加载了一些外部网站？
是的，我可以控制 iframe 中的代码。

标签： iframe

【解决方案1】：

您可以在 iframe 中为 'wheel' 和 'mousewheel' 事件设置处理程序。在事件处理程序中，您应该确定滚动的方向以及是否到达页面的顶部或底部（取决于方向） - 取消事件的默认操作。

jQuery 伪代码：

$(document).on('wheel mousewheel', function(e) {
  var direction = getWheelDirection();


  if ( direction == 'bottom' ) {
    if ( ...bottom of page reached... ) return false;
  } else {
    if ( ...top of page reached... ) return false;
  }

} );

【讨论】：

【解决方案2】：

或者，您可以在 iframe 上设置“悬停”处理程序并切换正文“溢出”属性。

【讨论】：