如何使用JQuery或本地JS禁用现代浏览器的默认功能,以防止在水平滚动时向后或向前滚动?
当使用触摸板并滚动到可滚动div的末尾或开头时,通常会发生这种情况。
如何使用JQuery或本地JS禁用现代浏览器的默认功能,以防止在水平滚动时向后或向前滚动?
当使用触摸板并滚动到可滚动div的末尾或开头时,通常会发生这种情况。
history.pushState(null, null, location.href);
window.onpopstate = function(event) {
history.go(1);
};
演示: http://jsfiddle.net/DerekL/RgDBQ/show/
除非您疯狂点击后退按钮或按住后退按钮并选择先前的条目,否则您将无法返回上一个网页。
注:在iOS上似乎不起作用onpopstate
(或事件onbeforeunload
)。
既然我创建了一个Web应用程序,为什么不提示用户是否存在未保存的更改呢?这样可以防止用户丢失任何未保存的更改,也可以防止用户浏览器历史记录中回到上一页或下一页。
如果其他人遇到了这个问题,这里是解决方案:
window.onbeforeunload = function(e) {
return 'Ask user a page leaving question here';
};
e.preventDefault(); return false;
。 - JacksonkrSystem Preferences -> Trackpad -> More Gestures.
虽然这不是你要找的 JS 解决方案,但如果你只是想防止它影响到自己,你可以关闭该功能。
这里有一个使用 CSS 的 overscroll-behavior-x 属性 可能(或可能不)适用于您的东西。链接的 MDN 文章详细介绍了使用示例和浏览器支持信息。
尝试使用值 contain
或 none
进行实验。引用自 MDN 链接,
contain
:在设置此值的元素内观察默认滚动溢出行为(例如“弹跳”效果或刷新),但不会对相邻的滚动区域进行滚动链接,例如底层元素不会滚动。
none
:不会对相邻的滚动区域进行滚动链接,并且防止默认的滚动溢出行为。
我猜测历史导航是否属于“默认滚动行为”类别取决于特定的浏览器/用户代理。最安全的选择可能是使用 none
,除非您需要保留其他“默认滚动行为”。
document.body.style.overscrollBehaviorX = "none";
body {
overscroll-behavior-x: none;
}
请查看MDN链接中的浏览器支持表,并在您想要支持的浏览器和设备上进行测试。
适用于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);