网站经常拒绝在iPhone上滚动(Safari)

Question

出于某种原因,我的网站经常拒绝滚动,但仅限于iPhone.

设备/浏览器做的工作:

• iPad(Safari)
• Android手机(Chrome)
• PC(Chrome(包括DevTools仿真)和IE11)

显示错误的设备:

• iPhone 4S
• iphone 5
• iPhone 6

很明显它与iPhone有关..就像只在iPhone上滚动一样超时.我会尝试尽可能好地描述错误.

加载网站后,我必须等待5秒才能滚动.然后我向下滚动一下.在滚动期间,可以看到滚动条(正常).当滚动条褪色时,向相反方向滚动将被阻挡5秒钟.当我在滚动条淡出之前滚动并向相反方向滚动时,它会按预期滚动.

此外,当我想要更改滚动方向时,就像我必须滑动两次以"初始化"滚动.我必须滚动,等待,滚动以实际滚动该方向.

所以:

• 向下滚动(滚动),等待,向下滚动(滚动) - 同一方向滚动
• 向上滚动(滚动),等待,向上滚动(滚动) - 同向滚动
• 向下滚动(滚动),向上滚动(滚动) - 在滚动条消失前改变方向
• 向下滚动(滚动),等待,向上滚动(无) - 改变方向
• 向下滚动(滚动),等待,向上滚动(无),等待,向上滚动(滚动) - 改变方向,必须滚动并等待两次

在wait,等我3秒钟.如果我在向相反方向滚动时没有等待足够长的时间,它就不会滚动.

该网站使用MeteorJS和jQuery.我尝试了一些移动实用程序脚本,如iScroll和FastClick,但它们似乎没有帮助.

Answer 1

好的，所以我开始评论了几个小时，只是为了发现阻止滚动的东西是菜单。

我有一个菜单，隐藏在背景中，具有以下样式：

menu {
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow-y: scroll;
}

我真的认为z-index当 z-index 更高的东西在它前面时，它的 -1 使它不可交互，但显然它不在 iPhone 上（在 Android 上它确实......）。

更改overflow-y: scroll;为hidden菜单未打开时（以及scroll菜单打开时）修复它。另外一个好主意是完全隐藏菜单。

Answer 2

编辑：我已经与苹果谈论了这个错误。他们承认其存在，但决定暂时不对其进行优先处理。如果此错误伤害了您，请在https://bugs.webkit.org/show_bug.cgi?id=169509上发表评论。

错误是什么：

对于我来说，问题仅在您到达滚动层的开始/结束，然后下一个手势的开始朝相同方向时发生。然后，webkit wheel事件决定它不能那样做，并且根本不允许您滚动。

有一个解决方法：永远不要让您的滚动层到达滚动的开始或结束！

div.addEventListener('scroll',() =>
    div.scrollTop = Math.max(1, Math.min(div.scrollTop,
                                         div.scrollHeight - div.clientHeight - 1));
);

我希望仍然参与webkit的某些人可以解决此问题（我从浏览器代码中退休了），这正在损害ios上可滚动的层。