// 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);
5条答案
按热度按时间1sbrub3j1#
演示:http://jsfiddle.net/DerekL/RgDBQ/show/
您将无法返回到上一个网页,除非您点击后退按钮或按住后退按钮并选择上一个条目。
注意:
onpopstate
(或事件onbeforeunload
)似乎在iOS上不起作用。hk8txs482#
所以我想,既然我已经创建了一个Web应用程序,为什么不提示用户任何未保存的更改,这将推迟用户丢失任何未保存的更改或结束在浏览器历史记录的上一页或下一页。
如果有人像我一样遇到这个问题,下面是解决方案:
vh0rcniy3#
如果你在Mac上,这是由轨迹板手势引起的。
这不是你想要的JS解决方案,但如果你只是想自己防止它,你可以关闭该功能。
s6fujrry4#
适用于Chrome和Safari(即用Chrome和Safari测试):
xriantvc5#
这里有一些东西,* 可能 *(或可能不)为您使用CSS的overscroll-behavior-x property工作。链接的MDN文章更详细,有使用示例和浏览器支持信息。
使用值
contain
或none
进行实验。从MDN链接中引用,contain
:在设置了该值的元素内部观察到默认滚动溢出行为(例如“反弹”效果或刷新),但不发生到相邻滚动区域的滚动链接,例如,滚动区域的滚动链接。底层元素将不会滚动。none
:相邻滚动区域不发生滚动链接,并且防止默认滚动溢出行为。我的猜测是,历史导航是否福尔斯“默认滚动行为”的范畴取决于特定的浏览器/用户代理。最安全的选择可能是使用
none
,除非您需要保留其他一些“默认滚动行为”。Javascript
CSS
查看MDN链接中的浏览器支持表,并在您希望支持的浏览器和设备上进行测试。