如果我使用-webkit-overflow-scrolling，Div滚动有时会冻结
如果我使用-webkit-overflow-scrolling来滚动div，它会以自然的动量完美地滚动。但是，div本身有时会冻结，不会响应我的手指移动。2-3秒后，它再次变为可滚动。
我不知道如何重现这个问题。但是，正如我所看到的，有两种主要的行为造成了这种情况。
首先，如果我等待了一段时间，比如20秒，然后触摸div，它就不会响应。我等待了几秒钟，然后它又开始工作了。
第二，我快速触摸了几次，然后，它就冻结了，几秒钟后，它又开始工作了。
我怎样才能防止结冰呢？
回答 7
Stack Overflow用户
发布于 2018-08-08 02:12:04
对我来说，冻结是可重复的，当分别在顶部或底部尝试向上或向下滚动时，就会发生冻结。修复方法是为touchstart和touchmove添加一些侦听器，并在它们上检测这些案例和event.preventDefault()。
如下所示，其中.scroller是实际滚动的div (更改为scrollTop)。
var lastY = 0;
var targetElt = document.querySelector(".scroller");
targetElt.addEventListener('touchstart', function(event) {
lastY = event.touches[0].clientY;
});
targetElt.addEventListener('touchmove', function(event) {
var top = event.touches[0].clientY;
var scrollTop = event.currentTarget.scrollTop;
var maxScrollTop = event.currentTarget.scrollHeight -
$(event.currentTarget).outerHeight();
var direction = lastY - top < 0 ? 'up' : 'down';
if (
event.cancelable && (
(scrollTop <= 0 && direction === 'up') ||
(scrollTop >= maxScrollTop && direction === 'down')
)
)
event.preventDefault();
lastY = top;
});我希望这能帮助下一个遇到这个可怕bug的可怜的灵魂！祝你好运，继续战斗！
Stack Overflow用户
发布于 2020-02-24 17:13:07
尝试在body上使用overflow: hidden。这应该可以解决这个问题：https://codepen.io/cppleon/pen/vYOgKzX
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="scrollable-content">
<div class="site-header"></div>
<div class="main-content"></div>
</div>
</body>
</html>CSS
body {
/* magic is here */
overflow: hidden;
}
#scrollable-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: gray;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.site-header {
width: 100%;
height: 120px;
background-color: orange;
}
.main-content {
height: 200%;
}Stack Overflow用户
发布于 2018-11-24 21:25:28
稳定解决方案
经过几天的尝试，我发现这个问题来自于fixed body element，可能是因为你不想让你的用户在滚动被阻塞时看到你的页面主体反弹：cf this example。当身体固定时，你遇到了滚动冻结错误，如果你在iOS设备上使用Desktop Safari检查身体，你可以看到它是一种“人工”移动……是的，webkit的东西……
我尝试了这个威胁中列出的所有解决方案，但也尝试了github类似的问题。没有人在工作。
对我来说，唯一稳定的修复方法是使用这个包：body-scroll-lock remove fixed on your element。现在，您可以享受固定的身体和没有滚动冻结错误。
希望它能帮助那些正在IOS上创建渐进式web应用程序的人。
https://stackoverflow.com/questions/39692337
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号