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

}

Answer 3

我能够使用已知的“修复”强制iOS6重绘来纠正此问题，而无需使用setTimeout。

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

Answer 4

我在iPhone，iPod和iPad上遇到了同样的错误。这不仅限于后者。

我尝试了所有被认为是解决方案的东西，但最终这个甜蜜的组合最终分离了元素，将其附加到容器并明确地指定它自己的高度，如下所示：

$(window).on('orientationchange', function(){
  var el  = $('.troublemaker').detach(),
      elh = el.height();
  setTimeout( el.css({'height':elh+'px'}).appendTo('.container'), 50 );
});

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

4 个答案: