Javascript 有什么方法可以防止水平滚动触发 OS X Lion Safari 上的向后滑动手势？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8737709/
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
Any way to prevent horizontal scrolling triggering swipe back gesture on OS X Lion Safari?
提问by Barum Rho
I am working on a UI that uses horizontal scrolling in a divelement (using overflow: scroll). I cannot scroll to the left, because it would start the animation for going back in history. Likewise, I cannot scroll to the right when there is a website to go forward to.
我正在开发一个在div元素中使用水平滚动的 UI （使用overflow: scroll）。我无法向左滚动，因为它会启动返回历史的动画。同样，当有网站要前进时，我无法向右滚动。
It works well on other browsers including Chrome on OS X Lion, which also supports swiping to go back in history. (At one point while I was developing, scrolling in a divworked on Safari, too. I've added event handlers and html which probably broke scrolling, but I have no clue what made it change.)
它适用于其他浏览器，包括 OS X Lion 上的 Chrome，它还支持滑动以返回历史。（在我开发的时候，div也在 Safari 上滚动。我添加了事件处理程序和 html，这可能会破坏滚动，但我不知道是什么让它发生了变化。）
Ideally, I would like to prevent going back or forward in history when scrolling on a specific div(even when it has reached an end.)
理想情况下，我希望在滚动特定内容时div（即使它已经结束）防止在历史中后退或前进。
Update: I tried adding jQuery.mousewheeland it somehow fixed the problem. (I just attached a empty event handler on .mousewheel().) I am still looking for a definitive answer.
更新：我尝试添加jQuery.mousewheel，它以某种方式解决了这个问题。（我只是在 上附加了一个空的事件处理程序.mousewheel()。）我仍在寻找明确的答案。
采纳答案by micho
I've been looking for a solution for days. What I have so far is in this plugin:
几天来我一直在寻找解决方案。到目前为止，我在这个插件中拥有的是：
https://github.com/micho/jQuery.preventMacBackScroll
https://github.com/micho/jQuery.preventMacBackScroll
It disabled scrolling for OSX Chrome (I couldn't find a way to disable it for OSX Safari) when you scroll left and up.
当您向左和向上滚动时，它禁用了 OSX Chrome 的滚动（我找不到为 OSX Safari 禁用它的方法）。
I hope that helps, please contribute to the project with any bugs you find, or if you find a way to disable this annoying behavior for Safari
我希望有帮助，请为您发现的任何错误贡献给项目，或者如果您找到一种方法来禁用 Safari 的这种烦人的行为
回答by user835542
In order to allow an element (e.g. a <div>) to scroll with a trackpad but prevent the browser from going back to the previous page, you need to prevent the browser's default action.
为了允许元素（例如 a <div>）使用触控板滚动但阻止浏览器返回上一页，您需要阻止浏览器的默认操作。
You can do this by listening to the mousewheel event on the element. Using the scroll properties of the element and the deltaX/Y properties on the event, you can prevent and stop the default action when it goes below zero or above the width/height.
您可以通过侦听元素上的 mousewheel 事件来做到这一点。使用元素的滚动属性和事件的 deltaX/Y 属性，您可以在默认操作低于零或高于宽度/高度时阻止和停止默认操作。
You can also use the delta information to manually scroll when you are preventing the whole scroll operation. This allows you to actually get to zero rather than stopping at 10 pixels or something.
当您阻止整个滚动操作时，您还可以使用增量信息手动滚动。这使您实际上可以达到零，而不是停在 10 像素或其他什么地方。
// Add the event listener which gets triggered when using the trackpad
element.addEventListener('mousewheel', function(event) {
// We don't want to scroll below zero or above the width and height
var maxX = this.scrollWidth - this.offsetWidth;
var maxY = this.scrollHeight - this.offsetHeight;
// If this event looks like it will scroll beyond the bounds of the element, prevent it and set the scroll to the boundary manually
if (this.scrollLeft + event.deltaX < 0 ||
this.scrollLeft + event.deltaX > maxX ||
this.scrollTop + event.deltaY < 0 ||
this.scrollTop + event.deltaY > maxY) {
event.preventDefault();
// Manually set the scroll to the boundary
this.scrollLeft = Math.max(0, Math.min(maxX, this.scrollLeft + event.deltaX));
this.scrollTop = Math.max(0, Math.min(maxY, this.scrollTop + event.deltaY));
}
}, false);
This works on Chrome, Safari, and Firefox on Mac. I haven't tested on IE.
这适用于 Mac 上的 Chrome、Safari 和 Firefox。我还没有在 IE 上测试过。
This solution will only affect the element in question and will let the rest of the page behave as normal. So you can use your browser as expected and go back a page, but while inside the element you won't accidentally go back when you didn't mean to.
此解决方案只会影响有问题的元素，并使页面的其余部分表现正常。因此，您可以按预期使用浏览器并返回页面，但在元素内部时，您不会无意中返回。
回答by Les Nie
Yes, in order to disable default behavior (swipe, pinch etc.) all you have to do is to add:
是的，为了禁用默认行为（滑动、捏合等），您只需添加：
event.preventDefault();
In you case simply register touchMove listener and use preventDefault() there (in function "touchmove").
在您的情况下，只需注册 touchMove 侦听器并在那里使用 preventDefault() （在函数“touchmove”中）。
element.addEventListener("touchmove", touchMove, false);
回答by NinjaKC
Look into the CSS3 style
查看 CSS3 样式
-ms-touch-action: none;
touch-action: none;
This works perfectly for me when the used app is only expected on HTML5 / CSS3 capable browsers.
当使用的应用程序仅适用于支持 HTML5 / CSS3 的浏览器时，这对我来说非常有效。
回答by Adler Faulkner
Piggy backing off of https://github.com/micho/jQuery.preventMacBackScrollposted by micho I have made this possible in both safari and chrome. Also, I made it work for both left scrolling and right scrolling.
micho 发布的https://github.com/micho/jQuery.preventMacBackScroll 的小猪后退 我已经在 safari 和 chrome 中实现了这一点。此外，我使它适用于左滚动和右滚动。
(Sorry that this is in coffeescript. It wouldn't be hard to translate back into javascript)
（抱歉，这是在 coffeescript 中。翻译回 javascript 并不难）
$(document).on 'ready', ->
# This code is only valid for Mac
if !navigator.userAgent.match(/Macintosh/)
return
# Detect browsers
# http://stackoverflow.com/questions/5899783/detect-safari-using-jquery
is_chrome = navigator.userAgent.indexOf('Chrome') > -1
is_safari = navigator.userAgent.indexOf("Safari") > -1
is_firefox = navigator.userAgent.indexOf('Firefox') > -1
# Handle scroll events in Chrome, Safari, and Firefox
if is_chrome || is_safari || is_firefox
$(window).on 'mousewheel', (event) ->
dX = event.deltaX || event.originalEvent.deltaX
dY = event.deltaY || event.originalEvent.deltaY
# If none of the parents can be scrolled right when we try to scroll right
prevent_right = dX > 0 && $(event.target)
.parents().addBack()
.filter ->
return this.scrollWidth - this.clientWidth != 0 &&
$(this).scrollLeft() < this.scrollWidth - this.clientWidth &&
($(this).css('overflow-y') == 'scroll' || $(this).css('overflow-y') == 'auto')
.length == 0
# If none of the parents can be scrolled left when we try to scroll left
prevent_left = dX < 0 && $(event.target)
.parents().addBack()
.filter ->
return $(this).scrollLeft() > 0
.length == 0
# If none of the parents can be scrolled up when we try to scroll up
prevent_up = dY > 0 && !$(event.target)
.parents().addBack()
.filter ->
return $(this).scrollTop() > 0
.length == 0
# Prevent minute left and right scroll from messing up vertical scroll
if (prevent_right || prevent_left) && Math.abs(dY) > 5 && !prevent_up
return
# Prevent futile scroll, which would trigger the Back/Next page event
if prevent_left || prevent_up || prevent_right
event.preventDefault()
回答by mzpn
I also used jQuery mousewheel, attaching this callback:
我还使用了 jQuery mousewheel，附加了这个回调：
onMousewheel: function(e, delta, deltaX, deltaY){
e.preventDefault();
$('leftElement').scrollLeft($('leftElement').scrollLeft() + deltaX); // leftElement = container element I want to scroll left without going back/forward
$('downElement').scrollTop($('downElement').scrollTop() - deltaY); // this was another element within the container element
}
回答by Hoang Tran
I came here while searching for the same thing but from user's point of view. So here's the FF setting that affect this:
我是从用户的角度来寻找相同的东西的。所以这是影响这个的FF设置：
browser.gesture.swipe.left
browser.gesture.swipe.right
set them to an empty string (delete what is there)
将它们设置为空字符串（删除那里的内容）
来源：https: //forums.macrumors.com/threads/disabling-firefox-back-forward-from-horizontal-scrolling.111589/
