gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 21:46:37 24 4
gpt4 key购买 nike

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

如果父容器有一个固定的高度和溢出:滚动,那么内部 iframe 没有正确滚动。它可以只滚动到底部或只滚动到顶部。但不能同时进行。

虽然如果我删除 overflow: scroll; 它工作正常;来自#outer 容器。

请查看随附的代码片段并在 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>

最佳答案

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

关于html - Safari 桌面中奇怪的 iframe 滚动行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38140308/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com