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

Question

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

htmlcssiframesafari

4

我找不到关于这个问题的相关信息。

如果父容器具有固定高度和overflow:scroll，则内部iframe将无法正常滚动。它只能向底部或顶部滚动。但是不能同时滚动。

如果我从#outer容器中删除overflow:scroll;，则可以正常工作。

请查看附加的代码片段并在Safari中运行它。

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

更新：我发现这个错误只能使用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>

- Michael

在我的Safari上似乎正常工作。我这里使用的是9.1版本。 - adamk22

@adamk22 你用的是普通鼠标还是苹果魔术鼠标/触控板？ - Michael

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JHacking · Answer 1

0

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

- JHacking

很遗憾，它没有帮助。 https://i.gyazo.com/c5925594b7d58d1a1abf51fdd13c6be4.gif - Michael

尝试将 onmousewheel 替换为 onscroll。 - JHacking

糟糕！请改为添加 onscroll='event.stopPropagation()'。抱歉！ - JHacking

这也没有帮助到我。结果发现可能是魔术鼠标或其他原装苹果输入设备的问题。 - Michael

- JamesBong · Answer 2

您可以通过将 iFrame 中的 body 设置为 height: 100%; 来解决此问题。