如何防止浏览器在水平滚动时在历史记录中返回/转发？

Question

如何在水平滚动时使用JQuery或Native JS禁用现代浏览器默认功能以向后或向前移动？

这通常发生在使用触控板时以及滚动到可滚动div的结尾或开始时.

Answer 1

history.pushState(null, null, location.href);
window.onpopstate = function(event) {
    history.go(1);
};

您将无法返回上一个网页,除非您通过后退按钮发送垃圾邮件或按住后退按钮并选择上一个条目.

_{注意:( onpopstate或事件onbeforeunload)似乎不适用于iOS.}

Answer 2

所以我想,因为我已经创建了一个Web应用程序,为什么不提示用户任何未保存的更改,这将推迟用户丢失任何未保存的更改或最终在浏览器历史记录中的上一页或下一页.

如果其他任何人像我一样遇到这个问题,这是解决方案:

window.onbeforeunload = function(e) {
    return 'Ask user a page leaving question here';
};

Answer 3

使用 CSS 的overscroll-behavior-x 属性，以下内容可能（或可能不）适合您。链接的 MDN 文章更详细，包含使用示例和浏览器支持信息。

尝试使用值contain或none。引用MDN链接，

contain：在设置此值的元素内观察到默认滚动溢出行为（例如“弹跳”效果或刷新），但相邻滚动区域不会发生滚动链接，例如底层元素不会滚动。

none：相邻滚动区域不会发生滚动链接，并且会阻止默认的滚动溢出行为。

我的猜测是，历史导航是否属于“默认滚动行为”类别取决于特定的浏览器/用户代理。最安全的选择可能是使用none，除非您需要保留一些其他“默认滚动行为”。

document.body.style.overscrollBehaviorX = "none";

body {
    overscroll-behavior-x: none;
}

检查MDN链接中的浏览器支持表，并在您想要支持的浏览器和设备上进行测试。

Answer 4

如果您使用的是 Mac，这是由 Track Pad Gestures 引起的。

System Preferences -> Trackpad -> More Gestures.

不是您正在寻找的 JS 解决方案，但如果您只想自己阻止它，您可以关闭该功能。