网站经常拒绝在iPhone上滚动（Safari） [英] Website often refuses to scroll on iPhone (Safari)

问题描述

出于某种原因，我的网站经常拒绝滚动，但只能在iPhone上滚动。

For some reason, my website often refuses to scroll, but only on iPhones.

做工作的设备/浏览器：

Devices/browsers that do work:

• iPad（Safari）


• Android手机（Chrome）


• PC（Chrome（包括DevTools仿真）和IE11）

显示错误的设备：

• iPhone 4S


• iPhone 5


• iPhone 6

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

So clearly it is iPhone related.. It's like there's a timeout on scrolling only on iPhone. I'll try to describe the bug as good as possible.

加载网站后，我需要等待5秒才能滚动。然后我向下滚动一下。在滚动期间，可以看到滚动条（正常）。当滚动条淡出时，滚动反向方向将被阻止5秒钟。当我在之前滚动并滚动相反的方向时滚动条会消失，它会按预期滚动。

After I load the site, I have to wait like 5 seconds before I can scroll. Then I scroll down a bit. During the scrolling, the scrollbar can be seen (as normal). When the scrollbar has faded, scrolling the opposite direction is blocked for like 5 seconds. When I scroll and scroll the opposite direction before the scrollbar fades, it scrolls as expected.

此外，当我想要更改滚动方向时，它是就像我必须刷两次初始化滚动。我必须滚动，等待，滚动才能实际滚动该方向。

Also when I want to change scrolling direction, it's like I have to swipe twice to "initialize" scrolling. I have to scroll, wait, scroll to actually scroll that direction.

所以：

• 向下滚动（滚动），等待，向下滚动（滚动 ） - 相同方向滚动


• 向上滚动（滚动），等待，向上滚动（滚动） - 同一方向滚动


• 向下滚动（滚动），向上滚动（滚动） - 滚动条消失前改变方向


• 向下滚动（滚动），等待，向上滚动（无） - 改变方向


• 向下滚动（滚动），等待，向上滚动（无），等待，滚动向上（滚动） - 改变方向，必须滚动并等待两次

• Scroll down (scrolls), wait, scroll down (scrolls) - same direction scrolls
• Scroll up (scrolls), wait, scroll up (scrolls) - same direction scrolls
• Scroll down (scrolls), scroll up (scrolls) - changing direction before scrollbar fades
• Scroll down (scrolls), wait, scroll up (nothing) - changing direction
• Scroll down (scrolls), wait, scroll up (nothing), wait, scroll up (scrolls) - changing direction, have to scroll and wait twice

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

At wait, I wait like 3 seconds. If I don't wait long enough when scrolling the opposite direction, it just doesn't scroll.

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

The website uses MeteorJS and jQuery. I've tried some mobile-utility scripts, like iScroll and FastClick, but they don't seem to help.

推荐答案

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

Ok so I started commenting stuff out for hours, just to find out that the thing that was blocking the scrolling was the menu.

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

I have a menu, hidden in the background with the following styles:

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

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

I really thought that having a z-index of -1 made it non-interactable when stuff with a higher z-index is in front of it, but apparently it doesn't on iPhone (on Android it does..).

更改 overflow-y：滚动; 改为隐藏当菜单未打开时（菜单打开时滚动）修复它。另外一个好主意就是完全隐藏菜单。

Changing overflow-y: scroll; to hidden when the menu isn't open (and scroll when the menu is open) fixes it. Also a good idea is to just hide the menu altogether.

这篇关于网站经常拒绝在iPhone上滚动（Safari）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！