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

r6l8ljro  于 2023-05-28  发布在  jQuery
关注(0)|答案(5)|浏览(225)

如何使用JQuery或Native JS禁用现代浏览器的默认功能,以便在水平滚动时向前或向后滚动?
这通常发生在使用触控板和滚动到可滚动div的末尾或开头时。

1sbrub3j

1sbrub3j1#

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

演示:http://jsfiddle.net/DerekL/RgDBQ/show/
您将无法返回到上一个网页,除非您点击后退按钮或按住后退按钮并选择上一个条目。
注意:onpopstate(或事件onbeforeunload)似乎在iOS上不起作用。

hk8txs48

hk8txs482#

所以我想,既然我已经创建了一个Web应用程序,为什么不提示用户任何未保存的更改,这将推迟用户丢失任何未保存的更改或结束在浏览器历史记录的上一页或下一页。
如果有人像我一样遇到这个问题,下面是解决方案:

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

vh0rcniy3#

如果你在Mac上,这是由轨迹板手势引起的。

System Preferences -> Trackpad -> More Gestures.

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

s6fujrry

s6fujrry4#

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

xriantvc5#

这里有一些东西,* 可能 *(或可能不)为您使用CSS的overscroll-behavior-x property工作。链接的MDN文章更详细,有使用示例和浏览器支持信息。
使用值containnone进行实验。从MDN链接中引用,
contain:在设置了该值的元素内部观察到默认滚动溢出行为(例如“反弹”效果或刷新),但不发生到相邻滚动区域的滚动链接,例如,滚动区域的滚动链接。底层元素将不会滚动。
none:相邻滚动区域不发生滚动链接,并且防止默认滚动溢出行为。
我的猜测是,历史导航是否福尔斯“默认滚动行为”的范畴取决于特定的浏览器/用户代理。最安全的选择可能是使用none,除非您需要保留其他一些“默认滚动行为”。

Javascript

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

CSS

body {
    overscroll-behavior-x: none;
}

查看MDN链接中的浏览器支持表,并在您希望支持的浏览器和设备上进行测试。

相关问题