javascript - Chrome 移动版所有子项的 body overscroll-behavior 错误

Question

因此随着 chrome 63 的发布，我们获得了新的 overscroll-behavior 属性。过去我们使用 overflow:hidden 来实现我们的目标，但这个新属性使移动设备上的滚动错误更加明显。

如果你去谷歌自己的演示here在 Android 上使用 chrome，您可以看到该错误。

在聊天框中，如果您向下滚动并尝试在不将手指从屏幕上移开的情况下向上滚动，您会发现您不能，除非您向上滚动然后向下滚动。同样，如果您要一直向上滚动然后抬起手指，然后尝试向上然后向下滚动而不抬起手指，它会卡住。无论是否使用 overscroll-behavior，所有子项都会发生这种情况。不仅限于 y 轴，它也发生在 x 轴上。

如您所知，这对用户来说非常烦人。

我能想到的唯一解决方案(尚未实现)是监听滚动事件，当用户将元素一直滚动到底部时，将滚动调整 0.1px 这样用户永远无法真正到达元素的底部，但这会非常昂贵，而且我们知道滚动事件并不总是在移动设备上立即触发，从而导致捕捉效果(而且我不知道它会导致什么其他效果，比如破坏用户滚动 Action 如果他们刚刚抬起手指)。

同样来自谷歌对 contain

的辩护

contain - prevents scroll chaining. Scrolls do not propagate to ancestors but local effects within the node are shown. For example, the overscroll glow effect on Android or the rubberbanding effect on iOS which notifies the user when they've hit a scroll boundary. Note: using overscroll-behavior: contain on the html element prevents overscroll navigation actions.

这根本不会发生，因此规范被破坏了。

据我所知，这发生在所有版本的 chrome for mobile 上，无论是网页 View 、网站还是全屏添加到主页都无关紧要。

如果有人知道是否有解决方法而不必完全更改应用程序的结构，那么如果有针对此的错误跟踪器，那就太好了。

更新: 错误正在处理 here

Answer 1

所以这是我使用的解决方法，它有效，但用户会看到一个小跳跃，但这是我可以接受的权衡。

document.querySelector("#somediv").addEventListener("touchstart", function() {

        var clientHeight = this.clientHeight;
        var scrollHeight = this.scrollHeight;
        var scrollTop = this.scrollTop;
        var scroll = scrollHeight - scrollTop;
        var scrollTo;

        if( scroll == clientHeight ) scrollTo = scrollTop - 1;
        if( scroll == scrollHeight ) scrollTo = scrollTop + 1;

        if(scrollTo) return this.scrollTop = scrollTo;

    });