如果您在 iPad 设备上使用最新版本的 iOS 访问此页面，则可以跟随。
http://fiddle.jshell.net/will/8VJ58/10/show/light/
我有两个新的 -webkit-overflow-scrolling 元素：应用的属性和价值。左侧灰色区域内容丰富，可以纵向或横向滚动。右侧只会横向滚动。
如果您从横向开始（以横向刷新），您可以使用惯性滚动滚动这两个区域。效果很好。现在将您的 iPad 翻转为纵向，只有左侧区域会滚动。这是预期的。但是当你翻回横向时，右侧区域将不再滚动，而左侧区域仍然可以。
很明显如何阻止这种情况发生，但我并不总是有内容来填充该区域。
有什么想法吗？
提前致谢，
Will :)
【问题讨论】：
迟到了类似但更简单的解决方案。
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 功能。
永远不要在应该支持触摸滚动的元素（或元素的父元素）上使用它。
【讨论】：
我能够使用已知的“修复”来强制 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);
});
【讨论】：
orientationchange 之后需要额外的setTimeout。仍然比明确设置高度更可取。
我在 iPhone、iPod 和 iPad 上遇到了同样的错误。这不仅限于后者。
我尝试了所有建议作为解决方案的方法，但最终甜蜜的组合最终是分离元素，将其附加到其容器并在执行此操作时显式为其分配自己的高度，如下所示：
$(window).on('orientationchange', function(){
var el = $('.troublemaker').detach(),
elh = el.height();
setTimeout( el.css({'height':elh+'px'}).appendTo('.container'), 50 );
});
【讨论】：
我实际上遇到了完全相同的问题。我已将其范围缩小到它会影响 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);
}
【讨论】：