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

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

这通常发生在使用触控板时以及滚动到可滚动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上，这是由Track Pad手势引起的。

 System Preferences -> Trackpad -> More Gestures. 

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

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