如何在不阻止触摸开始的情况下防止“过度滚动历史记录导航"? [英] How to prevent 'Overscroll history navigation' without preventing touchstart?

问题描述

我正在实现基于滑动的导航，并且在使用Chrome时遇到了麻烦.

I'm implementing a swipe-base navigation, and I'm running into trouble with Chrome.

将页面向右拖动时会触发一项新实现的功能，即过滚动历史记录导航"，从而导致跳回(到历史记录-1").为避免这种情况，我必须在touchstart上调用.preventDefault()，但这也会禁用从单击链接到滚动的所有内容. 如何在不干扰标准页面的情况下防止浏览器UI事件?

A newly implemented feature, 'Overscroll history navigation', is triggered when the page is dragged to the right, causing a jump back (to 'history -1'). To prevent this, I'd have to call .preventDefault() on touchstart, but this also disables everything from clicking links to scrolling. How do I prevent browser UI events without interfering with the standard page?

通过在chrome中设置适当的标志来完全禁用此功能可解决此问题，但对于面向公众的应用程序不切实际. chrome://flags/#overscroll-history-navigation

Disabling the feature altogether by setting the appropriate flag in chrome fixes the issue, but isn't practical for a public-facing application. chrome://flags/#overscroll-history-navigation

推荐答案

我最终想出了一个解决方案:

I eventually figured out a solution:

Chrome在滚动之前至少触发touchstart和touchmove.通过跟踪这些事件的方向，可以从常规滚动中过滤出过度滚动.

Chrome fires at least touchstart and touchmove before overscrolling. By tracking the direction of those events, an overscroll can be filtered from regular scrolling.

对于该Hammer.js问题，我已经编写了代码 .

I've written up the code for this Hammer.js issue.

这篇关于如何在不阻止触摸开始的情况下防止“过度滚动历史记录导航"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！