iPad 上的 Webkit 溢出滚动触摸 CSS 错误 [英] Webkit overflow scrolling touch CSS bug on iPad

问题描述

如果您在装有最新版 iOS 的 iPad 设备上访问此页面，则可以继续操作.

http://fiddle.jshell.net/will/8VJ58/10/show/light/

我有两个带有新 -webkit-overflow-scrolling 的元素:touch;应用的属性和值.左侧的灰色区域有很多内容，可以纵向或横向滚动.右侧只会横向滚动.

如果您从横向开始(横向刷新)，您可以使用惯性滚动来滚动这两个区域.效果很好.现在将您的 iPad 翻转为纵向，只有左​​侧区域会滚动.这是预期的.但是当你翻回横向时，右手区域将不再滚动，而左手区域仍然很好.

很明显如何阻止这种情况发生，但我并不总是有足够的内容来填充该区域.

所以有什么想法吗?

提前致谢，
将:)

解决方案

我实际上遇到了完全相同的问题.我已将范围缩小到这样一个事实:它会影响 DIV，当方向改变时，DIV 的内容不再需要滚动.

在你的例子中.右边的DIV横向滚动，不需要纵向滚动，但需要再次滚动.当两个 DIV(左和右)需要滚动而不管方向如何时，我已经对此进行了测试，这不是问题.

更新:

我似乎已经解决了这个问题！

该问题似乎是时间问题.在调整大小期间，内部内容不足以保证在溢出的外部 DIV 上滚动.在这上面浪费了一天之后，我终于想出了这个 hack:

<div id="header" style="position:fixed; height:100px">Header</div><div id="content" style="overflow: auto; -webkit-overflow-scrolling: touch"><div id="contentInner">内容不够长，无法始终在不同方向滚动

这是我每次调整页面大小时的逻辑:

 函数 handleResize(){var iHeight = $(window).height() - $("#header").height();//需要设置高度，以允许滚动 -//这是将滚动的固定容器$('#content').height(iHeight - 10);//临时吹出内部内容，在调整大小时强制ipad滚动//这是一个时间问题，在调整大小后定位期间内部内容不够大，需要外部 DIV 滚动$('#contentInner').height(1000);//将高度设置回正常值//我们必须暂停"足够长的时间才能完成重新定向调整大小window.setTimeout(delayFix, 10);}函数 delayFix(){var iHeight = $(window).height() - $("#header").height();//内部 div 强制外部 div 总是至少有一些东西可以滚动.这使得内部 DIV 始终是橡皮筋"并防止//无缘无故滚动到整个地方的页面.//内层的高度至少需要和容器一样大，实际上要大一点才能导致//可滚动区域正确地橡皮筋"$('#contentInner').height(iHeight + 20);}

If you visit this page on your iPad device on the latest version of iOS you can follow along.

http://fiddle.jshell.net/will/8VJ58/10/show/light/

I have two elements with the new -webkit-overflow-scrolling: touch; property and value applied. The left hand grey area has plenty of content and will scroll in portrait or landscape. The right will only scroll in landscape.

If you start in landscape (refresh in landscape) you can scroll both areas with the inertia scrolling. Works great. Now flip your iPad into portrait and only the left hand area will scroll. This is as intended. But when you flip back to landscape the right hand area will no longer scroll at all, whereas the left hand area is fine still.

It's obvious how to stop this happening, but I don't always have the content to fill the area.

So any ideas?

Thanks in advance,
Will :)

解决方案

I am actually having the exact same issue. I have narrowed it down to the fact that it affects DIVs whose content's no longer require scrolling when the orientation is changed.

In your example. The DIV on the right scrolls in landscape, does not NEED to scroll in portrait, but then needs to scroll again. I have tested this when both DIVs (left and right) need to scroll regardless of orientation and its not a problem.

UPDATE:

I actually seem to have fixed this!

The issue appears to be a timing issue. During resize the inner content is not big enough to warrant scrolling on the outer DIV that has overflow. After wasting a day on this, I finally came up with this hack:

<div id="header" style="position:fixed; height:100px">Header</div>
<div id="content" style="overflow: auto; -webkit-overflow-scrolling: touch">
   <div id="contentInner">
      content that is not long enough to always scroll during different orientations
   </div>
</div>

Here is my logic whenever the page resizes:

   function handleResize()
    {
        var iHeight = $(window).height() - $("#header").height();

        // Height needs to be set, to allow for scrolling - 
        //this is the fixed container that will scroll
        $('#content').height(iHeight - 10);

        // Temporarily blow out the inner content, to FORCE ipad to scroll during resizing
        // This is a timing issue where the inner content is not big enough during resize post orientation to require the outer DIV to scroll
        $('#contentInner').height(1000);

        // Set the heights back to something normal
        // We have to "pause" long enough for the re-orientation resize to finish
        window.setTimeout(delayFix, 10);
}

function delayFix()
{
    var iHeight = $(window).height() - $("#header").height();

    // Inner divs force the outer div to always have at least something to scroll.  This makes the inner DIV always "rubber-band" and prevents
    // the page from scrolling all over the place for no reason.
    // The height of the inner guy needs to be AT LEAST as big as the container and actually a nip bigger to cause the
    // scrollable area to 'rubber band' properly
    $('#contentInner').height(iHeight + 20);

}

这篇关于iPad 上的 Webkit 溢出滚动触摸 CSS 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！