CSS iOS 9 `-webkit-overflow-scrolling:touch` 和 `overflow: scroll` 中断滚动功能
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/32897960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS 9 `-webkit-overflow-scrolling:touch` and `overflow: scroll` breaks scrolling capability
提问by Zach
I'm developing a webapp and I've got a div inside of an iFrame that has hidden, overflowed content that I want to be scrollable.
我正在开发一个 web 应用程序,我在 iFrame 中有一个 div,它隐藏了我想要滚动的溢出内容。
On Safar on iOS 9 when I add -webkit-overflow-scrolling:touch;
to the div (that already has overflow-y: scroll;
to give the scroll a fluid feel, it breaks and doesn't scroll at all.
在 iOS 9 上的 Safar 上,当我添加-webkit-overflow-scrolling:touch;
到 div 时(这已经必须overflow-y: scroll;
给滚动一种流畅的感觉,它会中断并且根本不滚动。
I know that this is a known issue but I haven't found solutions relevant to my scenario: I have iFrames that do more than transmit data, they actually contain content for the user. Orientation doesn't matter, the content will always need to be scrollable.
我知道这是一个已知问题,但我还没有找到与我的场景相关的解决方案:我的 iFrame 不仅仅传输数据,它们实际上还包含用户的内容。方向无关紧要,内容始终需要可滚动。
回答by Christopher Camps
I just ran into this issue with dynamic content within a div that had overflow: auto
and -webkit-overflow-scrolling: touch
.
我刚刚在具有overflow: auto
和的 div 中遇到了动态内容的这个问题-webkit-overflow-scrolling: touch
。
Dirty, ugly workaround: force the content inside to be bigger than the scrolling div when added to dom. Something like this:
肮脏、丑陋的解决方法:当添加到 dom 时,强制里面的内容大于滚动的 div。像这样的东西:
<div style="overflow: auto; -webkit-overflow-scrolling: touch;">
<div style="min-height: 101%">
dynamic content
</div>
</div>
My theory is that Safari tries (needs) to do some heavy optimizations when -webkit-overflow-scrolling: touch
is added, and these don't play nice with some types of dynamic content.
我的理论是 Safari 尝试(需要)在-webkit-overflow-scrolling: touch
添加时进行一些大量优化,并且这些优化不适用于某些类型的动态内容。
回答by Thomas Kelly
I also ran into this issue with webkit-overflow-scrolling: touch
on iOS9. It can be reproduced on an device or the iOS simulator. As Christopher Camps mentions, it only happens with dynamic content, i.e. content that changes from being smaller then the scrollable container to larger then the container.
我webkit-overflow-scrolling: touch
在 iOS9 上也遇到了这个问题。它可以在设备或 iOS 模拟器上重现。正如 Christopher Camps 所提到的,它只发生在动态内容中,即从小于可滚动容器变为大于容器的内容。
Heres a CodePen demonstrating this issue, including Christopher Camps fix.
这是演示此问题的 CodePen,包括 Christopher Camps 修复。
回答by stracktracer
It seems another hack for this Safari bug is to use javascript to set a style="overflow: none"
and reset it back to its previous value immediately after.
似乎这个 Safari 错误的另一个黑客是使用 javascript 设置 astyle="overflow: none"
并在之后立即将其重置回以前的值。