javascript - 水平滚动时如何防止浏览器在历史记录中后退/前进？

Question

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

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

Answer 1

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

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

您将无法返回上一个网页，除非您向返回按钮发送垃圾邮件或按住返回按钮并选择上一个条目。

_{注意：（onpopstate或 event onbeforeunload）似乎不适用于 iOS。}

Answer 2

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

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

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

Answer 3

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

System Preferences -> Trackpad -> More Gestures. 

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

Answer 4

适用于 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);

Answer 5

以下是使用 CSS 的overscroll-behaviour 属性可能对您有用的东西：

Javascript

document.body.style.overscrollBehaviour = "contain";

CSS

body {
    overscroll-behaviour: contain;
}

在 2020 年 7 月 10 日撰写本文时，这会导致在页面左端向左滚动不再触发向后的历史导航。

我不确定这会对其他用户体验产生什么其他副作用。我希望这可以应用于元素内部，但似乎这仅在应用于文档正文时才有效。