如何防止浏览器在水平滚动时后退/前进

How to prevent a browser from going back/forward in history when scrolling horizontally?

本文关键字：前进 滚动 何防止 浏览器 水平      更新时间：2023-09-26

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

这通常发生在使用触控板和滚动到可滚动div的末尾或开始时。

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

演示:http://jsfiddle.net/DerekL/RgDBQ/show/

您将无法返回到上一个网页，除非您按下返回按钮或按住返回按钮并选择上一个条目。

注意:onpopstate(或事件onbeforeunload)似乎不能在iOS上工作

所以我想既然我已经创建了一个web应用程序，为什么不提示用户任何未保存的更改，这将推迟用户丢失任何未保存的更改或在浏览器历史记录中的上一页或下一页结束。

如果有人像我一样遇到这个问题，下面是解决方案:

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

如果你在mac上，这是由触控板手势引起的。

System Preferences -> Trackpad -> More Gestures.

不是你想要的JS解决方案，但如果你只是想自己防止它，你可以关闭该功能。

适用于Chrome和Safari(即使用Chrome和Safari进行测试):

// el === element on which horizontal scrolling is done 
// (can be container of scrolled element or body or any other ancestor)
var preventHistoryBack = function (e) {
  var delta = e.deltaX || e.wheelDeltaX;
  if (! delta) {
    return;
  }
  window.WebKitMediaKeyError /*detect safari*/ && (delta *= -1);
  if (((el.scrollLeft + el.offsetWidth) === el.scrollWidth && delta > 0) || (el.scrollLeft === 0 && delta < 0) ) {
    e.preventDefault();
  }
};
el.addEventListener('mousewheel', preventHistoryBack);

使用CSS的overscroll-behavior-x属性，可能会(也可能不会)为您工作。链接的MDN文章更详细，有使用示例和浏览器支持信息。

用contain或none值进行实验。引用MDN链接，

contain:默认的滚动溢出行为在该值所设置的元素内部被观察到(例如"bounce"效果或刷新)，但不会对相邻的滚动区域产生滚动链接，例如底层元素不会滚动。

none:没有滚动链接发生到相邻的滚动区域，并且默认的滚动溢出行为被阻止。

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

Javascript 

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

body {
    overscroll-behavior-x: none;
}

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

相关文章：