Question

我有一个HTML页面，其中有一个固定高度 div ，它应该是可滚动的（只能垂直）。在iOS 5中，可以使用以下方法实现：

overflow-y: auto;
-webkit-overflow-scrolling: touch;

div 包含一个包含大约10个项目的无序列表。

滚动有效，但有时只有在我对角线或水平滑动手指而不是垂直滑动时才会滚动。

我想知道是否有人遇到过这个问题。我不想认为这是iOS5中的一个错误，但我无法弄清楚我做错了什么，因为大部分时间它都能正常工作。

Answer 1

我有完全相同的问题。问题原来是由我的网站用于跟踪历史记录更改和加载脚本的两个零大小的iframe引起的。删除这些修复了问题。我用苹果提出了一个错误，等着他们回复。

检查您的网页上是否有任何iframe可能是原因。

Answer 2

我找到了一个hacky解决方案，但它需要javascript ...

我在通过ajax加载可滚动节点并使用js附加它们时偶然发现了这个问题。

我发现用js重置-webkit-overflow-scrolling属性可以节省一天

JS CODE：

var myDiv = $('.myDiv');
myDiv.css('-webkit-overflow-scrolling','auto');
function fn(){
    myDiv.css('-webkit-overflow-scrolling','touch');
}
setTimeout(fn,500);

我们必须调用setTimeout方法，这真是太糟糕了，但这是我能想到的唯一方法......

编辑：注意display:none

Webkit overflow scrolling touch CSS bug on iPad

Answer 3

您需要将此css设置放在css文件中 - 使用content_css配置变量加载的文件：

body {
    -webkit-transform: translate3d(0, 0, 0);
}

另一个选项是直接从tinymce初始化代码设置css：

$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));

Answer 4

我在iOS 5.1.1中遇到了同样的问题，结果是由于::after伪元素position: fixed位于一个元素上，该元素包含可显示“错误”的可滚动列表滚动轴“行为。 Details here

使用-webkit-overflow-scrolling在iOS 5中滚动的问题

4 个答案: