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

如果您在最新版本的iOS上的iPad设备上访问此页面，则可以按照步骤操作。Webkit溢出滚动触摸iPad上的CSS错误

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

我与新-webkit溢出滚动两个元素：触摸;财产和价值适用。左侧灰色区域内容丰富，可以纵向或横向滚动。右侧只会横向滚动。

如果从横向开始（刷新横向），可以使用惯性滚动滚动这两个区域。很棒。现在将您的iPad翻成肖像，只有左手区域会滚动。这是预期的。但是当你翻转到风景时，右手区域将不再滚动，而左手区域仍然很好。

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

那么有什么想法？

由于提前，
会:)

来源

2012-01-31 will

其实我有完全相同的问题。我已经缩小了它的范围，它影响了在方向改变时内容不再需要滚动的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); 

}

来源

2012-05-10 23:59:17 ProVega

我完全忘了这个问题，实际上我最终还是把它弄清楚了，用完全相同的解决方案。我应该把代码备份到这里，节省了一些时间，哎呀！谢谢虽然:) – will 2012-05-11 08:49:29

找到另一种方式，如果任何人有兴趣...任何意见欢迎。见下文。 – 2012-09-18 13:10:14

这真的很好。太糟糕了，故障必须首先出现在那里。 – 2014-01-18 09:07:06

具有类似迟到，但更简单的解决方案。

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功能。切勿将其用于支持触摸滚动的元素（或元素的父项）。

来源

2012-09-18 12:59:34

绝对简单得多！对此略有变化（切换单独的css类而不是手动修改属性）对恢复原始溢出属性更好。 – Krease 2012-11-05 22:33:49

我想我也试过，但回去手动设置属性。不知道为什么。 – 2012-11-06 08:00:33

谢谢！我在ipad4上遇到了同样的问题。这固定了它。我有和ProVega一样的想法，但是这个解决方案似乎更加清晰。非常感谢！你节省了我一些时间！ – 2013-08-07 21:17:44

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

我试过，建议将解决一切，但最终的甜蜜组合最终被拆卸的元素，其附加到其容器并明确分配给它自己的高度，而这样做，就像这样：

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

来源

2012-11-20 22:47:52

我能够使用已知的“修复”来强制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); 
});

来源

2013-05-18 20:10:19 user2397538

我喜欢在方向改变时“切换”显示状态的解决方案。我觉得比重新计算高度需要更少的资源。 – 2014-05-27 16:35:03

我也喜欢这个解决方案。不幸的是，它不直接为我工作。 'orientationchange'之后需要额外的'setTimeout'。仍然更喜欢明确设置高度。 – WrongAboutMostThings 2014-07-21 14:37:29

千上传给你。 – 2015-09-21 15:30:05

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

回答

相关问题