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

Website often refuses to scroll on iPhone (Safari)

提问by Richard de Wit

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

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

Devices/browsers that dowork:

可以工作的设备/浏览器：

• iPad (Safari)
• Android phones (Chrome)
• PC (Chrome (including DevTools emulation) & IE11)

• iPad (Safari)
• 安卓手机（Chrome）
• PC（Chrome（包括 DevTools 模拟）和 IE11）

Devices that show the bug:

显示错误的设备：

• iPhone 4S
• iPhone 5
• iPhone 6

• iPhone 4S
• iphone 5
• iPhone 6

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.

很明显它与 iPhone 相关..就像只有在 iPhone 上滚动才会超时。我会尽量描述这个错误。

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 oppositedirection is blocked for like 5 seconds. When I scroll and scroll the opposite direction beforethe scrollbar fades, it scrolls as expected.

加载网站后，我必须等待 5 秒钟才能滚动。然后我向下滚动一点。在滚动期间，可以看到滚动条（正常）。当滚动条褪色时，向相反方向滚动会被阻止大约 5 秒钟。当我在滚动条消失之前向相反方向滚动和滚动时，它会按预期滚动。

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

此外，当我想更改滚动方向时，就好像我必须滑动两次才能“初始化”滚动。我必须滚动，等待，滚动才能真正滚动那个方向。

So:

所以：

• 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

• 向下滚动（滚动），等待，向下滚动（滚动） -同方向滚动
• 向上滚动（滚动），等待，向上滚动（滚动） -同方向滚动
• 向下滚动（滚动），向上滚动（滚动） -在滚动条消失之前改变方向
• 向下滚动（滚动），等待，向上滚动（无） -改变方向
• 向下滚动（滚动），等待，向上滚动（无），等待，向上滚动（滚动） -改变方向，必须滚动并等待两次

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

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

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

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

采纳答案by Richard de Wit

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;
}

I really thought that having a z-indexof -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..).

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

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

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

回答by Noam Rosenthal

EDIT:I've spoke to Apple about this bug. They acknowledged its existence but decided not to prioritize it for now. If this bug is hurting you, please comment on https://bugs.webkit.org/show_bug.cgi?id=169509.

编辑：我已经和苹果公司谈过这个错误。他们承认它的存在，但决定暂时不优先考虑它。如果此错误正在伤害您，请在https://bugs.webkit.org/show_bug.cgi?id=169509 上发表评论。

What the bug is:

错误是什么：

The problem for me occurs only when you reach the beginning/end of the scrolling layer and then the beginning of your next gesture goes in the same direction. Then the webkit wheel event decides that it can't go that way and doesn't let you scroll at all.

只有当您到达滚动层的开头/结尾，然后下一个手势的开头朝同一方向时，才会出现我的问题。然后 webkit wheel 事件决定它不能那样做并且根本不让你滚动。

There is a workaround for this: never let your scrolling layer reach the beginning or end of the scroll!

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

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

I hope some people still involved in webkit can fix this (I'm a bit retired from browser code), it's hurting scrollable layers on ios everywhere.

我希望仍然参与 webkit 的一些人可以解决这个问题（我有点从浏览器代码中退休了），它在 ios 上到处都在伤害可滚动层。

回答by Hayk Ghonakhchyan

I had the same problem with the menu scroll, often it refused to scroll after menu container changed its size (problem causes only in iPhone). I found the solution in my case, just toggling the css overflow styles. Like I had on container these styles

我在菜单滚动方面遇到了同样的问题，通常在菜单容器更改其大小后它拒绝滚动（问题仅在 iPhone 中引起）。我在我的案例中找到了解决方案，只需切换 css 溢出样式。就像我在容器上有这些样式

.container {    
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 280px;
    overflow-x: hidden;
    overflow-y: auto;
}

After every opening the menu just run this script

每次打开菜单后只需运行此脚本

$('.container').css('overflow-y', 'hidden');
setTimeout(function () {
  $('.container').css('overflow-y', 'scroll');
}, 50);

回答by HazeyAce

I encountered a similar issue for iOS.

我在 iOS 上遇到了类似的问题。

After a lot of hair was pulled out, I found a solution that worked for me: response by Wes R

拔了很多头发后，我找到了一个对我有用的解决方案： Wes R 的回应

The idea is that you listen for a touchstart event, capture the touch's Y position, listen for the touchmove, capture that touch's Y position, to work out the touch direction. If at the top already, and the direction is 'up' then event.preventDefault()to stop the browser attempting to scroll up, do same for scrolling down at the bottom of the page.

这个想法是你监听 touchstart 事件，捕获触摸的 Y 位置，监听 touchmove，捕获该触摸的 Y 位置，以确定触摸方向。如果已经在顶部，并且方向是“向上”，那么event.preventDefault()要阻止浏览器尝试向上滚动，请在页面底部向下滚动。

It was for a similar issue with same direction scrolling while at scroll boundary, sorry if it's irrelevant for your use case, I might've misunderstood OP :P

这是针对在滚动边界时相同方向滚动的类似问题，抱歉，如果它与您的用例无关，我可能误解了 OP :P

回答by P.O.W.

Solved adding

解决了添加

-webkit-overflow-scrolling: touch;

-webkit-overflow-scrolling：触摸；

to container class as suggested here

到这里建议的容器类