Ade*_*dem 45 css safari webkit ios
如果我使用-webkit-overflow-scrolling滚动div,它会以原生动量完美滚动.但是,div本身有时会冻结并且不会响应我的手指动作.2-3秒后,它再次变为可滚动.
我不知道我是如何重现这个问题的.但是,正如我所看到的,有两种主要行为会造成这种情况.
首先,如果我等待一段时间,例如20秒,然后触摸div,它就不会响应.我等了几秒钟,它又恢复了工作.
其次,我快速触摸几次,然后,它变得冰冷,再过几秒钟后,它再次开始工作.
我怎样才能防止这种冻结？
小智 9
对我来说,冻结是可重复的,并且当分别在已经在顶部或底部时向上或向下滚动时发生.修复是为了添加一些监听器touchstart,touchmove并检测这些情况并event.preventDefault()在'em上.
类似下面的内容,.scroller实际滚动的div(更改为scrollTop)在哪里.
var lastY = 0; // Needed in order to determine direction of scroll.
$(".scroller").on('touchstart', function(event) {
lastY = event.touches[0].clientY;
});
$('.scroller').on('touchmove', function(event) {
var top = event.touches[0].clientY;
// Determine scroll position and direction.
var scrollTop = $(event.currentTarget).scrollTop();
var direction = (lastY - top) < 0 ? "up" : "down";
// FIX IT!
if (scrollTop == 0 && direction == "up") {
// Prevent scrolling up when already at top as this introduces a freeze.
event.preventDefault();
} else if (scrollTop >= (event.currentTarget.scrollHeight - event.currentTarget.outerHeight()) && direction == "down") {
// Prevent scrolling down when already at bottom as this also introduces a freeze.
event.preventDefault();
}
lastY = top;
});
我希望这能帮助下一个遇到这个可怕虫子的可怜的灵魂!祝你好运并继续战斗!
小智 9
尝试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%;
}
稳定的溶液
经过很多天尝试修复它，我发现问题来自固定body元素，也许是因为您不希望用户在滚动被阻止时看到页面主体弹跳：参见此示例。当主体被修复并且您遇到滚动冻结错误时，如果您使用 iOS 设备上的 Desktop Safari 检查主体，您可以看到它有点“人为”移动......是的 webkit 东西......
我尝试了此威胁中列出的所有解决方案，也尝试了 github 上的类似问题。没有人在工作。
对我来说唯一稳定的解决方法是使用这个包：body-scroll-lock并删除元素fixed上的body。现在你既可以享受固定的身体，也可以享受没有滚动的冻结错误。
希望它能对目前在 IOS 上创建渐进式 Web 应用程序的人们有所帮助。
| 归档时间： |
|
| 查看次数： |
11153 次 |
| 最近记录： |