如果我使用-webkit-overflow-scrolling作为一个滚动div，它会以固有的动量完美地滚动。但是，div本身有时会冻结，并且不响应我的手指移动。2-3秒后，它再次变得可滚动。我不知道我是如何再现这个问题的，但是，正如我所看到的，有两个主要的行为造成了这种情况。首先，如果我等待一段时间，例如，20秒，触摸div，它没有响应。我等待几秒钟，它又开始工作了。第二，我快速触摸几次，然后，它变得冻结，再一次，几秒钟后，它又开始工作。如何防止这种冻结？
-webkit-overflow-scrolling
eit6fx6z1#
对我来说，冻结是可重复的，当试图向上或向下滚动时，已经在顶部或底部时，分别发生。修复方法是为touchstart和touchmove添加一些侦听器，并检测这些情况和event.preventDefault()。类似于下面的内容，其中.scroller是实际滚动的div（更改为scrollTop）。
touchstart
touchmove
event.preventDefault()
.scroller
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; });
我希望这能帮助下一个遇到这个可怕虫子的可怜的灵魂！祝你好运，继续战斗！
xa9qqrwz2#
尝试在body上使用overflow: hidden。这应该可以解决问题：https://codepen.io/cppleon/pen/vYOgKzXHTML
overflow: hidden
<!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%; }
tag5nh1u3#
稳定溶液
在尝试修复它很多天之后，我看到问题来自固定的body元素，可能是因为你不想让你的用户看到你的页面主体在滚动被阻止时反弹：cf this example .当身体是固定的，你遇到滚动冻结错误，如果你检查身体与桌面Safari在你的iOS设备上，你可以看到它的一种“人为”移动...是的webkit的东西...我尝试了这个威胁上列出的所有解决方案，但也在github上尝试了类似的问题。没有人在工作。
body
我唯一稳定的解决方法就是使用这个包：body-scroll-lock和删除body元素上的fixed。现在你可以享受固定正文和没有滚动冻结错误。
fixed
希望它能帮助那些目前正在iOS上创建渐进式Web应用程序的人。
n3ipq98p4#
我使用了下面的代码，我认为是工作。
var scrollTimer; $('.scroller').on('scroll',function(e){ clearTimeout(scrollTimer); scrollTimer = setTimeout(() => { this.scrollTop = Math.max(1, Math.min(this.scrollTop, this.scrollHeight - this.clientHeight - 1)); }, 300); });
lkaoscv75#
我遇到了同样的问题。但很容易解决。这是我所做的：删除了可滚动的div的高度属性。也许你和我的情况不同，这对你不起作用。
w3nuxt5m6#
我知道这是一个很老的问题，但也许其他人也有同样的问题。对我来说，这个问题是由iNoBounce（https://github.com/lazd/iNoBounce）引起的。Y滚动很好，但X滚动会引起很多问题，元素会卡住，你必须触摸和移动很多次，直到它最终滚动。删除iNoBounce后，除了明显的滚动反弹（特别是“overscrolling”），iNoBounce删除后没有问题了。为了禁用overscrolling，我使用了以下方法，但是滚动反弹现在在那里。
html { height: 100%; position: fixed; overflow: hidden; } body { height: 100%; position: relative; overflow: auto; }
bttbmeg07#
我最近遇到了这个bug，在尝试了很多黑客解决方案之后，对我们来说最好的解决方案是简单地将视图滚动一个像素，如果它在底部。这可以防止“冻结”，我认为这实际上是在嵌套容器完全向下滚动时主体/窗口接收滚动事件。这是使用React，但你明白这个想法。
const listener = () => { window.requestAnimationFrame(() => { if (!this.scrollRef.current) { return; } const { scrollTop, scrollHeight, clientHeight } = this.scrollRef.current; if (scrollTop === scrollHeight - clientHeight) { // at the bottom this.scrollRef.current.scrollTo(0, scrollHeight - clientHeight - 1); } }); } this.scrollRef.current.addEventListener("scroll", listener);
7条答案
按热度按时间eit6fx6z1#
对我来说，冻结是可重复的，当试图向上或向下滚动时，已经在顶部或底部时，分别发生。修复方法是为
touchstart和touchmove添加一些侦听器，并检测这些情况和event.preventDefault()。类似于下面的内容，其中
.scroller是实际滚动的div（更改为scrollTop）。我希望这能帮助下一个遇到这个可怕虫子的可怜的灵魂！祝你好运，继续战斗！
xa9qqrwz2#
尝试在body上使用
overflow: hidden。这应该可以解决问题：https://codepen.io/cppleon/pen/vYOgKzXHTML
CSS
tag5nh1u3#
稳定溶液
在尝试修复它很多天之后，我看到问题来自固定的
body元素，可能是因为你不想让你的用户看到你的页面主体在滚动被阻止时反弹：cf this example .当身体是固定的，你遇到滚动冻结错误，如果你检查身体与桌面Safari在你的iOS设备上，你可以看到它的一种“人为”移动...是的webkit的东西...我尝试了这个威胁上列出的所有解决方案，但也在github上尝试了类似的问题。没有人在工作。
我唯一稳定的解决方法就是使用这个包：body-scroll-lock和删除
body元素上的fixed。现在你可以享受固定正文和没有滚动冻结错误。希望它能帮助那些目前正在iOS上创建渐进式Web应用程序的人。
n3ipq98p4#
我使用了下面的代码，我认为是工作。
lkaoscv75#
我遇到了同样的问题。但很容易解决。这是我所做的：删除了可滚动的div的高度属性。也许你和我的情况不同，这对你不起作用。
w3nuxt5m6#
我知道这是一个很老的问题，但也许其他人也有同样的问题。对我来说，这个问题是由iNoBounce（https://github.com/lazd/iNoBounce）引起的。Y滚动很好，但X滚动会引起很多问题，元素会卡住，你必须触摸和移动很多次，直到它最终滚动。
删除iNoBounce后，除了明显的滚动反弹（特别是“overscrolling”），iNoBounce删除后没有问题了。为了禁用overscrolling，我使用了以下方法，但是滚动反弹现在在那里。
bttbmeg07#
我最近遇到了这个bug，在尝试了很多黑客解决方案之后，对我们来说最好的解决方案是简单地将视图滚动一个像素，如果它在底部。这可以防止“冻结”，我认为这实际上是在嵌套容器完全向下滚动时主体/窗口接收滚动事件。这是使用React，但你明白这个想法。