Webkit溢出滚动触摸iPad上的CSS错误

Question

如果您在最新版本的iOS上的iPad设备上访问此页面,则可以按照此步骤操作.

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

我有两个新的-webkit-overflow-scrolling元素:touch; 适用的财产和价值.左手灰色区域内容丰富,可以纵向或横向滚动.右边只会在横向滚动.

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

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

那么任何想法？

在此先感谢,
威尔:)

Answer 1

使用类似但更简单的解决方案来得晚.

var $el = $('.myElementClass');

function setOverflow(){
    $el.css({webkitOverflowScrolling: 'touch', overflow: 'auto'});
}

function resizeHandler(){
    $el.css({webkitOverflowScrolling: 'auto', overflow: 'hidden'});
    setTimeout(setOverflow,10);
}

[编辑] 注意,经过实验(很多),我发现display:none声明肯定会打破这个webkit-overflow-scrolling: touch功能.切勿在应该支持触摸滚动的元素(或元素的父元素)上使用它.

Answer 2

我实际上有同样的问题.我已经将它缩小到这样一个事实,它会影响DIV,当方向改变时,其内容不再需要滚动.

在你的例子中.右侧的DIV在横向滚动,不需要以纵向滚动,但随后需要再次滚动.我已经测试了这个,当两个DIV(左和右)需要滚动而不管方向而且不是问题.

更新:

我其实似乎已经解决了这个问题!

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

<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>

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

   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);

}