Question

我找不到有关此问题的任何相关信息。

如果父容器具有固定高度并且溢出：滚动，则内部iframe不能正确滚动。它可以只滚动到底部或仅滚动到顶部。但不是在同一时间。

如果我删除溢出它可以正常工作：滚动;来自#outer容器。

请查看附带的代码段并在Safari中运行。

目前，我正在使用Safari Version 9.0.3，OS X El Capitan 10.11.3

UPD：我发现这个bug只能用Apple输入设备，Magic Mouse或触摸板重现。看看视频： https://www.youtube.com/watch?v=2IpjAbWgbuc

我无法重现代码段中的错误，所以这是实际的html页面：

https://s3-eu-west-1.amazonaws.com/plio/other/iframe_scroll_safari_issue.html

* {
  box-sizing: border-box;
}
#outer {
  height: 500px;
  width: 500px;
  margin: 0 auto;
  padding: 60px;
  overflow: scroll;
}
#inner1, #inner2 {
  height: 300px;
  margin-bottom: 50px;
}
#scrollable1, #scrollable2 {
  height: 100%;
  width: 100%;
  overflow: scroll;
}
#scrollable1 > *, #scrollable2 > * {
  border: 3px dashed;
  width: 100%;
}

<!DOCTYPE html>
<html>
  <body>

    <div id="outer">
      <div id="inner1">
        <div id="scrollable1">
          <img src="http://static.fjcdn.com/pictures/Long_3c2320_670942.jpg">
        </div>
      </div>
      <div id="inner2">
        <iframe id="scrollable2" src="https://plio.s3.amazonaws.com/uploads/KwKXz5RefrE5hjWJ2/standards-files/HLiWGZdNL5hifyRhJ/YCWzyS3XX2Wkko6tv-demo.docx.html"></iframe>
      </div>
    </div>

  </body>
</html>

Answer 1

尝试将此js事件添加到您的iframe：onmousewheel='event.preventDefault();'。如果这不起作用，请告诉我。

Answer 2

您可以通过将iFrame中的正文设置为height: 100%;

来解决此问题

Safari桌面中奇怪的iframe滚动行为

2 个答案: