javascript 停止镀铬后退/前进两指滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15829172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop chrome back/forward two finger swipe
提问by andrei
I want to disable the two finger swipe that causes Chrome going back or forward. I have a website where the user might lose progress on his work if he doesn't specifically saves.
我想禁用导致 Chrome 后退或前进的两指滑动。我有一个网站，如果用户没有专门保存，他可能会失去工作进度。
I have tried using window.onbeforeunloadbut that doesn't seem to work if I have hashes in the url (back forward would change between www.example.com/work/#step1#unsaved www.example.com/work/#step0) and the event doesn't seem to trigger.
我试过使用，window.onbeforeunload但如果我在 url 中有哈希值，这似乎不起作用（后退会在 www.example.com/work/#step1#unsaved www.example.com/work/#step0 和事件似乎没有触发。
I was about to switch to another solution but today I noticed that in Google Docs it's completely disabled. How did they achieve that?
我正要切换到另一个解决方案，但今天我注意到在 Google Docs 中它完全被禁用。他们是如何做到这一点的？
采纳答案by Niels Keurentjes
You're looking at the problem at the wrong level. OnBeforeUnload is simply not triggered because there is nothing being unloaded from the browsers perspective. Therefore you have, quite bluntly, implemented the wrong mechanism for versioning - fragments are for page states, not document states as you are using it now.
你在错误的层面上看待问题。OnBeforeUnload 根本不会被触发，因为从浏览器的角度来看，没有任何东西被卸载。因此，坦率地说，您实施了错误的版本控制机制 - 片段用于页面状态，而不是您现在使用的文档状态。
If you insist on maintaining state through hash fragments you need to use another mechanism to guard against page state changing. Since all current browsers support LocalStorage I'd use that. And well, while at it, put all the document state data there instead of in the URL, since that is how Google Docs does it and that is why they don't have this issue.
如果您坚持通过散列片段维护状态，则需要使用另一种机制来防止页面状态更改。由于当前所有浏览器都支持 LocalStorage，因此我会使用它。好吧，同时将所有文档状态数据放在那里而不是 URL 中，因为 Google Docs 就是这样做的，这就是为什么他们没有这个问题。
回答by Breck
Disable Chrome two fingers back/forward swipe
This worked for me:
这对我有用：
body {
overscroll-behavior-x: none;
}
回答by redgetan
Make the specific page open in a new tab/window by default (by putting target="_blank"> in hyperlink). That way there'll be no previous page to go back to.
默认情况下在新选项卡/窗口中打开特定页面（通过将 target="_blank"> 放在超链接中）。这样就没有前一页可以返回了。
Or prevent Horizontal Scrolling by default. To do that, you can use jquery.mousewheel to do:
或者默认阻止水平滚动。为此，您可以使用 jquery.mousewheel 来执行以下操作：
$(document).on("mousewheel",function(event,delta){
// prevent horizontal scrolling
if (event.originalEvent.wheelDeltaX !== 0) {
event.preventDefault();
}
});
回答by user3139574
Disable or replace swipe gestures for Google Chrome 61
禁用或替换 Google Chrome 61 的滑动手势
The question that leads me here was marked "duplicate" and closed to answers. I believe this answer is better suited for the "duplicated" question, however, I feel this answer could possibly save time for someone landing on either question.
引导我到这里的问题被标记为“重复”并且无法回答。我相信这个答案更适合“重复”的问题，但是，我觉得这个答案可能会为解决任何一个问题的人节省时间。
Better question: Disable navigation swipe on Chrome browser in javascript
更好的问题： 在 javascript 中禁用 Chrome 浏览器上的导航滑动
This Google developers article helped me to allow the e.preventDefault() to work and prevent swipe gestures as of Chrome 61.
这篇 Google 开发人员文章帮助我从 Chrome 61 开始允许 e.preventDefault() 工作并防止滑动手势。
https://developers.google.com/web/updates/2017/01/scrolling-intervention
https://developers.google.com/web/updates/2017/01/scrolling-intervention
givanse's answer to the following was the code that I used to write my own swipe event handlers:
givanse 对以下问题的回答是我用来编写自己的滑动事件处理程序的代码：
Detect a finger swipe through JavaScript on the iPhone and Android
在 iPhone 和 Android 上通过 JavaScript 检测手指滑动
In summary, the following two events are used to implement the swipe gestures:
综上所述，以下两个事件用于实现滑动手势：
handleTouchStart (e) {
...
},
handleTouchMove (e) {
...
e.preventDefault()
}
As of Chrome 56, the default behavior is to make the event listeners passive and thus disable the ability to prevent Chrome's swipe gestures. To override this behavior, event listeners can be added as follows:
从 Chrome 56 开始，默认行为是使事件侦听器处于被动状态，从而禁用阻止 Chrome 滑动手势的功能。要覆盖此行为，可以按如下方式添加事件侦听器：
document.addEventListener(
'touchstart',
this.handleTouchStart,
{passive: false}
)
document.addEventListener(
'touchmove',
this.handleTouchMove,
{passive: false}
)
By passing the {passive: false} object as the third parameter to the addEventListener method, the listener is registered as active and can stop Chrome's default behavior with the e.preventDefault() event method.
通过将 {passive: false} 对象作为第三个参数传递给 addEventListener 方法，监听器被注册为活动的并且可以使用 e.preventDefault() 事件方法停止 Chrome 的默认行为。
回答by CharlieM
I've been working on something similar where I want to override the forward/backward history swiping gesture. Depending on what your swipe area is you can tweak the selector as follows:
我一直在研究类似的东西，我想覆盖前进/后退历史滑动手势。根据您的滑动区域，您可以按如下方式调整选择器：
html { touch-action:none; }
This is the associated documentation that gives you all the properties to all touch actions like panning or zooming features built into the browser.
这是相关文档，可为您提供所有触摸操作的所有属性，例如浏览器内置的平移或缩放功能。
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
回答by nabrown
Assuming you have a horizontal-scrolling element, adding overflow-behavior-x: contain;is the easiest way prevent the scroll action from spilling out into the page and causing the navigation.
假设您有一个水平滚动元素，添加overflow-behavior-x: contain;是防止滚动操作溢出到页面并导致导航的最简单方法。
回答by Gabriel Doty
Building on both the previous answers given by @roy riojas and @redgetan - I combined their answers to allow for this to be dynamic and prevent both forward and backwards - again - per @roy's comments - you must know the class of your element, and for this implementation - the class of the nested element that is actually being scrolled
建立在@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));
回答by Endoplasmic
I was able to disable it by typing chrome://flags in the address bar and heading down to "Overscroll history navigation" and setting it to "Disabled" from the dropdown.
我可以通过在地址栏中输入 chrome://flags 并向下转到“Overscroll history navigation”并将其从下拉列表中设置为“Disabled”来禁用它。
回答by roy riojas
Hi this worked for me on chrome but not for the entire page, but for places where I have scrollable content.
嗨，这在 chrome 上对我有用，但不适用于整个页面，但适用于我有可滚动内容的地方。
In Google Docs (Spreadsheets) it seems to be working because they don't have a back page to go. If you navigate to another URL (manually) it will not prevent you from navigating back.
在 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;
}
});
One thing to keep in mind is that the code above is making two assumptions:
要记住的一件事是上面的代码做了两个假设：
- your element with horizontal scrollable content has a class scrollable-h
- If checks if the scrollLeft if bigger less than 4px and then just make it scroll to 5px returning false effectively cancel the back gesture
- 具有水平可滚动内容的元素有一个类scrollable-h
- 如果检查 scrollLeft 是否大于 4px 然后让它滚动到 5px 返回 false 有效地取消后退手势
Important: - This only prevents the back swipe gesture, when is done fast, if you do it very slow it will still trigger sometimes.
重要提示： - 这只会阻止向后滑动手势，快速完成时，如果你做得很慢，它有时仍会触发。
- Also this does not prevent the forward swipe gesture, but it could also be done by checking if the element has reached the maximum scrollLeft. If that is the case then move it 20px back and return false to prevent the event from happening... It is up to you to add this use case if it happens to make sense to you.
- 此外，这不会阻止向前滑动手势，但也可以通过检查元素是否已达到最大 scrollLeft 来完成。如果是这种情况，则将其向后移动 20px 并返回 false 以防止事件发生......如果它对您有意义，则由您添加此用例。
You can take a look to a proof of concept here. http://jsfiddle.net/royriojas/JVA6m/#base
您可以在此处查看概念证明。http://jsfiddle.net/royriojas/JVA6m/#base
