我想禁用导致 Chrome 后退或前进的两指滑动。我有一个网站，如果用户不专门保存，用户可能会失去工作进度。
我尝试过使用window.onbeforeunload，但如果我在 url 中有哈希值（后退会在 www.example.com/work/#step1#unsaved www.example.com/work/#step0 之间更改）和事件似乎没有触发。
我正要切换到另一个解决方案，但今天我注意到在 Google Docs 中它已完全禁用。他们是如何做到这一点的？
问问题
21731 次
10 回答
71
于 2019-05-10T06:32:30.473 回答
11
默认情况下，使特定页面在新选项卡/窗口中打开（通过将 target="_blank"> 放入超链接）。这样就没有前一页可以返回。
或者默认阻止水平滚动。为此，您可以使用 jquery.mousewheel 执行以下操作：
$(document).on("mousewheel",function(event,delta){
// prevent horizontal scrolling
if (event.originalEvent.wheelDeltaX !== 0) {
event.preventDefault();
}
});
于 2013-06-10T19:13:05.620 回答
9
假设您有一个水平滚动元素，添加overscroll-behavior-x: contain;是防止滚动动作溢出到页面并导致导航的最简单方法。
于 2020-02-24T23:28:26.923 回答
7
禁用或替换 Google Chrome 61 的滑动手势
将我带到这里的问题被标记为“重复”并且无法回答。我相信这个答案更适合“重复”的问题，但是，我觉得这个答案可能会为有人回答这两个问题节省时间。
更好的问题： 在 javascript 中禁用 Chrome 浏览器上的导航滑动
这篇 Google 开发人员文章帮助我允许 e.preventDefault() 从 Chrome 61 开始工作并防止滑动手势。
https://developers.google.com/web/updates/2017/01/scrolling-intervention
givanse 对以下问题的回答是我用来编写自己的滑动事件处理程序的代码：
在 iPhone 和 Android 上通过 JavaScript 检测手指滑动
总之，以下两个事件用于实现滑动手势：
handleTouchStart (e) {
...
},
handleTouchMove (e) {
...
e.preventDefault()
}
从 Chrome 56 开始，默认行为是使事件侦听器处于被动状态，从而禁用阻止 Chrome 滑动手势的功能。要覆盖此行为，可以按如下方式添加事件侦听器：
document.addEventListener(
'touchstart',
this.handleTouchStart,
{passive: false}
)
document.addEventListener(
'touchmove',
this.handleTouchMove,
{passive: false}
)
通过将 {passive: false} 对象作为第三个参数传递给 addEventListener 方法，监听器被注册为活动的并且可以使用 e.preventDefault() 事件方法停止 Chrome 的默认行为。
于 2017-09-27T04:25:13.340 回答
2
我一直在做类似的事情，我想覆盖向前/向后历史滑动手势。根据您的滑动区域，您可以按如下方式调整选择器：
html { touch-action:none; }
这是相关文档，它为您提供所有触摸操作的所有属性，例如浏览器内置的平移或缩放功能。
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
于 2018-09-11T15:50:59.607 回答
1
在@roy riojas 和@redgetan 先前给出的答案的基础上-我结合了他们的答案以使其具有动态性并防止向前和向后-再次-根据@roy的评论-您必须知道元素的类别，并且对于此实现 - 实际正在滚动的嵌套元素的类
(function ($) {
$(document).on('mousewheel', function(e) {
var $target = $(e.target).closest('.scrollable-h');
var scroll = $target.scrollLeft();
var maxScroll = $target.find('.scrollable-h-content').width() - $target.width();
if(scroll <= 0) {
if(scroll <= 0 && e.originalEvent.wheelDeltaX >= 0) {
e.preventDefault();
}
}
if(scroll >= maxScroll) {
if (scroll >1 && e.originalEvent.wheelDeltaX <= 0) {
e.preventDefault();
}
}
});}(jQuery));
于 2014-02-12T23:56:33.787 回答
1
我可以通过在地址栏中键入 chrome://flags 并向下转到“Overscroll history navigation”并从下拉菜单中将其设置为“Disabled”来禁用它。
于 2014-02-13T08:28:31.017 回答
0
嗨，这在 chrome 上对我有用，但不适用于整个页面，但适用于我有可滚动内容的地方。
在 Google Docs (Spreadsheets) 中，它似乎可以正常工作，因为它们没有后页可走。如果您导航到另一个 URL（手动），它不会阻止您导航回来。
$(document).on('mousewheel', function(e) {
var $target = $(e.target).closest('.scrollable-h');
if ($target.scrollLeft () <= 4) {
$target.scrollLeft(5);
return false;
}
});
要记住的一件事是，上面的代码做了两个假设：
- 您的具有水平滚动内容的元素有一个类scrollable-h
- 如果检查 scrollLeft 是否大于 4px 然后让它滚动到 5px 返回 false 有效地取消后退手势
重要提示： - 这只会防止向后滑动手势，当快速完成时，如果你做得非常慢，它有时仍会触发。
- 此外，这不会阻止向前滑动手势，但也可以通过检查元素是否已达到最大 scrollLeft 来完成。如果是这种情况，则将其向后移动 20 像素并返回 false 以防止事件发生……如果碰巧对您有意义，则由您添加此用例。
您可以在此处查看概念证明。http://jsfiddle.net/royriojas/JVA6m/#base
于 2013-04-09T22:39:02.127 回答
0
您可以使用以下代码禁用后退/前进：
document.addEventListener("wheel", function(event) {
event.preventDefault();
}, { passive: false });
请注意，添加 {passive: false } 是必不可少的，至少在 Chrome 中是这样。如果您只想在某些区域禁用后退/前进，则可以使用这样的代码（假设您使用的是 jquery，并将类 disable-back-forward 添加到要禁用后退/前进的部分）：
document.addEventListener("wheel", function(event) {
if ($(event.target).closest('.disable-back-forward').length)
event.preventDefault();
}, { passive: false });
于 2020-06-27T18:30:53.193 回答
-4
你在错误的层面上看待问题。OnBeforeUnload 根本没有被触发，因为从浏览器的角度来看没有任何东西被卸载。因此，坦率地说，您实现了错误的版本控制机制 - 片段用于页面状态，而不是您现在使用的文档状态。
如果你坚持通过散列片段来维护状态，你需要使用另一种机制来防止页面状态改变。由于当前所有浏览器都支持 LocalStorage，我会使用它。好吧，在此过程中，将所有文档状态数据放在那里而不是在 URL 中，因为 Google Docs 就是这样做的，这就是他们没有这个问题的原因。
于 2013-04-12T19:50:57.130 回答