iPad上的Webkit溢出滚动触摸CSS bug

Question

如果您使用最新版本的iOS在您的iPad设备上访问此页面，则可以跟随操作。

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

我使用new -webkit-overflow-scrolling有两个元素: touch；应用的属性和值。左边的灰色区域有很多内容，可以在纵向或横向滚动。右侧将仅在横向滚动。

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

如何阻止这种情况的发生是显而易见的，但我并不总是有足够的内容来填充这个区域。

有什么好主意吗？

提前谢谢你，

将:)

Answer 1

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

在你的例子中。右边的DIV在横向滚动，不需要在纵向滚动，但需要再次滚动。当两个DIVs (左和右)都需要滚动而不考虑方向时，我已经测试过了，这不是问题。

更新：

实际上，我似乎已经解决了这个问题！

这个问题似乎是时间问题。在调整大小期间，内部内容不够大，无法保证在溢出的外部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);

}

Answer 2

后来有了一个类似但更简单的解决方案。

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 3

在不使用setTimeout的情况下，我能够使用一个已知的“修复”来强制iOS6重绘来纠正这个问题。

$(window).on('orientationchange', function()
{
    var $elem=$('[selector]');
    var orgDisplay=$elem.css('display');
    $elem.css('display','none');
    $elem.get(0).offsetHeight;
    $elem.css('display',orgDisplay);
});