iOS 9`-webkit-overflow-scrolling：touch`和`overflow：scroll`打破了滚动功能 [英] iOS 9 `-webkit-overflow-scrolling:touch` and `overflow: scroll` breaks scrolling capability

问题描述

我正在开发一个webapp，我有一个内部的iFrame隐藏，溢出的内容，我想滚动。

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.

在Safar当我添加 -webkit-overflow-scrolling：touch; 到div（已经有 overflow-y：scroll;

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.

我知道这是一个已知的问题，但我没有找到与我的场景相关的解决方案：我有iFrame不仅仅传输数据，它们实际上包含用户的内容。方向并不重要，内容总是需要可滚动。

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.

推荐答案

我刚刚碰到这个问题与div的动态内容 overflow：auto 和 -webkit-overflow-scrolling：touch 。

I just ran into this issue with dynamic content within a div that had overflow: auto and -webkit-overflow-scrolling: touch.

脏的，丑陋的解决方法：强制内部的内容大于滚动div这样的东西：

Dirty, ugly workaround: force the content inside to be bigger than the scrolling div when added to dom. Something like this:

<div style="overflow: auto; -webkit-overflow-scrolling: touch;">
    <div style="min-height: 101%">
        dynamic content
    </div>
</div>

我的理论是，Safari尝试（需要） code> -webkit-overflow-scrolling：touch 已添加，并且对于某些类型的动态内容不起作用。

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.

这篇关于iOS 9`-webkit-overflow-scrolling：touch`和`overflow：scroll`打破了滚动功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！