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（或事件onbeforeunload）似乎无法在iOS上运行。}

Answer 2

所以我认为，因为我已经创建了一个Web应用程序，为什么不提示用户进行任何未保存的更改，这将导致用户放弃任何未保存的更改或最终在浏览器历史记录中的上一页或下一页。

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

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

Answer 3

如果您使用的是Mac，则这是由触控板手势引起的。

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 property，这可能对您有用：

Javascript

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

CSS

body {
    overscroll-behaviour: contain;
}

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

我不确定这会对其余的用户体验产生什么其他副作用。我希望可以将其应用于 inside 元素，但似乎只有将其应用于文档正文时，它才能起作用。

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

5 个答案:

Javascript

CSS