Javascript 当水平滚动时，如何防止浏览器在历史记录中返回/前进？

当水平滚动时，如何使用JQuery或原生JS禁用现代浏览器的默认功能以进行向后或向前移动

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

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

演示：

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

---

注意：

onpopstate

（或事件

onbeforeunload

）在iOS上似乎不起作用。

如果您在mac上，这是由轨迹板手势引起的

System Preferences -> Trackpad -> More Gestures. 

---

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

因此，我想既然我创建了一个web应用程序，为什么不提示用户进行任何未保存的更改，这将延迟用户丢失任何未保存的更改，或者在浏览器历史记录的上一页或下一页结束

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

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

---

在Chrome和Safari中工作（即使用Chrome和Safari进行测试）：

//el==在其上进行水平滚动的元素
//（可以是滚动元素、主体或任何其他祖先的容器）
var preventHistoryBack=函数（e）{
var delta=e.deltaX | | e.wheelDeltaX；
if（！delta）{
返回；
}
window.WebKitMediaKeyError/*检测safari*/&（delta*=-1）；
如果（（el.scrollLeft+el.offsetWidth）==el.scrollWidth&&delta>0）| |（el.scrollLeft==0&&delta<0））{
e、 预防默认值（）；
}
};
el.addEventListener（“鼠标滚轮”，防止历史倒退）；

以下是一些可能适用于使用CSS的内容：

Javascript

document.body.style.overscrollBehavior=“contain”；

CSS

正文{
过卷行为：包含；
}

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

---

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

驱动程序和触控板软件是您的霸主。看这个。无意冒犯，但就用户体验而言，像那样操纵浏览器历史记录是非常糟糕的。这很令人困惑和恼火。你可以看到你的想法，如果你按下后退按钮，你仍然可以返回。@steve如果没有理由的话，那真的很糟糕。但有合法的案例可以这样操纵，至少暂时如此。。。我想应用它的一个例子是，从css伪类的使用中跳过不需要的历史轨迹。或者，禁用历史记录，并提供一个自定义的

后退按钮

。或者，当某人正在付款过程中，使用后退按钮将使其整个付款无效，而使用页面后退按钮则可以正常工作。我无法更改流程，它由支付提供商管理，但我可以尝试帮助防止用户在不知情的情况下搞砸它！你说得很对，为什么他们会在浏览器中实现如此烦人的来回跳跃呢？我认为当你试图在水平滚动窗格中查找某些内容时，这对任何用户来说都是非常烦人的；返回false注意，“wheel”和“mouseweel”的操作有点不同：它可以工作，但由于Chrome 51，您将看到“[违规]在控制台中的滚动阻止“wheel”事件”消息中添加了非被动事件侦听器。但我们需要非passive事件，因为我们称之为“preventDefault”，不清楚如何抑制该消息

// 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);