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

时间:2015-04-09 06:53:31

标签: javascript html css iphone

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

执行工作的设备/浏览器:

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

显示错误的设备:

  • iPhone 4S
  • iPhone 5
  • iPhone 6

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

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

此外,当我想要更改滚动方向时,就像我必须滑动两次以“初始化”滚动一样。我必须滚动等待滚动才能实际滚动该方向。

所以:

  • 向下滚动(滚动),等待,向下滚动(滚动) - 向相同方向滚动
  • 向上滚动(滚动),等待,向上滚动(滚动) - 向相同方向滚动
  • 向下滚动(滚动),向上滚动(滚动) - 在滚动条淡出前改变方向
  • 向下滚动(滚动),等待,向上滚动() - 改变方向
  • 向下滚动(滚动),等待,向上滚动(),等待,向上滚动(滚动) - 更改方向,必须滚动并等待两次

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

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

5 个答案:

答案 0 :(得分:5)

编辑:我已经和Apple谈过这个错误了。他们承认它的存在但决定暂时不优先考虑它。如果此错误对您造成伤害,请对https://bugs.webkit.org/show_bug.cgi?id=169509进行评论。

错误是什么:

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

有一种解决方法:永远不要让滚动图层到达滚动的开头或结尾!

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

我希望仍然有一些参与webkit的人可以解决这个问题(我已经从浏览器代码中退出了一段时间),它会伤害ios上的可滚动图层。

答案 1 :(得分:2)

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

我有一个隐藏在后台的菜单,其中包含以下样式:

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上它不..)。

当菜单未打开时将overflow-y: scroll;更改为hidden(菜单打开时scroll)会将其修复。另外一个好主意就是完全隐藏菜单。

答案 2 :(得分:0)

我对菜单滚动有同样的问题,通常在菜单容器更改大小后它拒绝滚动(问题仅在iPhone中引起)。我找到了解决方案,只是切换了CSS溢出样式。就像我在容器上使用这些样式一样

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

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

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

答案 3 :(得分:0)

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

拔掉很多头发后,我找到了一个对我有用的解决方案: response by Wes R

这个想法是,您听一个touchstart事件,捕获该触摸的Y位置,听一下touchmove,捕获该触摸的Y位置,确定触摸方向。如果已经在顶部,并且方向是“向上”,则event.preventDefault()要停止浏览器尝试向上滚动,请执行相同的操作以在页面底部向下滚动。

这是由于在滚动边界处具有相同方向的滚动而发生的类似问题,对不起,如果与您的用例无关,我可能误解了OP:P

答案 4 :(得分:0)

解决了

-webkit-overflow-scrolling:触摸;

根据建议的here