出于某种原因,我的网站经常拒绝滚动,但仅限于iPhone。
执行工作的设备/浏览器:
显示错误的设备:
很明显它与iPhone有关..就像只在iPhone上滚动一样超时。我会尝试尽可能好地描述错误。
加载网站后,我需要等待5秒才能滚动。然后我向下滚动一下。在滚动期间,可以看到滚动条(正常)。当滚动条淡出时,滚动反向方向将被阻止5秒钟。当我滚动并向滚动并向前滚动滚动条消失时,它会按预期滚动。
此外,当我想要更改滚动方向时,就像我必须滑动两次以“初始化”滚动一样。我必须滚动,等待,滚动才能实际滚动该方向。
所以:
在wait
,我等了3秒钟。如果我在向相反方向滚动时没有等待足够长的时间,它就不会滚动。
该网站使用MeteorJS和jQuery。我尝试了一些移动实用程序脚本,例如iScroll和FastClick,但它们似乎没有帮助。
答案 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)