Webkit溢出滚动触摸iPad上的CSS错误
如果您在最新版本的iOS上的iPad设备上访问此页面，则可以按照步骤操作。
http://fiddle.jshell.net/will/8VJ58/10/show/light/
我有两个元素与新的-webkit溢出滚动：触摸; 财产和价值应用。 左侧的灰色区域内容丰富，可以纵向或横向滚动。 右边只会横向滚动。
如果从横向开始（在横向刷新），则可以使用惯性滚动来滚动这两个区域。 很好用。 现在，将您的iPad纵向翻转，只有左手区域会滚动。 这是预期的。 但是当你翻转到风景时，右手区域将不再滚动，而左手区域仍然很好。
很明显，如何阻止这种情况发生，但我并不总是有内容填补这个领域。
那么有什么想法？
提前致谢，
会:)
我实际上有完全相同的问题。 我已经把它缩小到这样一个事实，即它影响了在方向改变时内容不再需要滚动的DIV。
在你的例子中。 右侧的DIV在横向滚动，不需要纵向滚动，但需要再次滚动。 我已经testing过这两个DIV（左和右）需要滚动而不pipe方向和它不是一个问题。
更新：
我似乎已经修好了！
这个问题似乎是一个时间问题。 在resize时，内容不够大，不足以保证在溢出的外部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> 这是我的逻辑，每当页面resize：
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); }
迟到了一个类似，但更简单的解决scheme。
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: touchfunction。 切勿将其用于支持触摸滚动的元素（或元素的父项）。
我能够使用一个已知的“修复”强制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); });
我经历了iPhone，iPod和iPad上的同样的错误。 这不仅限于后者。
我尝试了所有被认为是解决scheme的东西，但最终这个甜蜜的组合最终将元素分离，将其附加到它的容器，并在做这个时明确地指定它的高度，如下所示：
$(window).on('orientationchange', function(){ var el = $('.troublemaker').detach(), elh = el.height(); setTimeout( el.css({'height':elh+'px'}).appendTo('.container'), 50 ); });