html – Safari桌面中奇怪的iframe滚动行为_html-js-css

概述我找不到有关此问题的任何相关信息. 如果父容器具有固定高度并且溢出：滚动,则内部iframe不能正确滚动.它可以只滚动到底部或仅滚动到顶部.但不是在同一时间. 如果我删除溢出它可以正常工作：滚动;来自#outer容器. 请查看附带的代码段并在Safari中运行它. 目前,我正在使用Safari Version 9.0.3,OS X El Capitan 10.11.3 UPD：我发现这个bug只我找不到有关此问题的任何相关信息.

如果父容器具有固定高度并且溢出：滚动,则内部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>

解决方法尝试将此Js事件添加到iframe：onmousewheel =’event.preventDefault();’. 如果这不起作用,请告诉我. 总结

以上是内存溢出为你收集整理的html – Safari桌面中奇怪的iframe滚动行为全部内容，希望文章能够帮你解决html – Safari桌面中奇怪的iframe滚动行为所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1053064.html