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

Question

如果您在运行最新版本 iOS 的 iPad 设备上访问此页面，您可以继续操作。

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

我有两个元素带有新的 -webkit-overflow-scrolling: touch;应用的属性和值。左边的灰色区域有很多内容，可以纵向或横向滚动。右侧只会横向滚动。

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

很明显如何阻止这种情况发生，但我并不总是有内容来填充该区域。

有什么想法吗？

提前致谢，
Will :)

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 特性。永远不要在应该支持触摸滚动的元素(或元素的父元素)上使用它。