任何方式来防止OS X狮子Safari浏览器上的水平滚动触发滑回手势？

我正在使用水平滚动div元素（使用overflow: scroll ）的用户界面。 我不能滚动到左​​边，因为它会开始回溯历史的animation。 同样，当有网站前进时，我也不能滚动到右侧。

它适用于其他浏览器，包括OS X Lion上的Chrome，它也支持刷回历史logging。 （在我开发的时候，在一个div上滚动了Safari，我添加了事件处理程序和HTML，这可能会破坏滚动，但我不知道是什么让它改变了。

理想情况下，我想阻止在特定的div上滚动（即使已经达到目的），在历史中前进或后退。

更新：我试着添加jQuery.mousewheel ，它以某种方式解决了这个问题。 （我只是附加一个空的事件处理程序.mousewheel() 。）我仍然在寻找一个明确的答案。

Answer 1

我一直在寻找一个解决scheme的天。 我到目前为止在这个插件：

https://github.com/micho/jQuery.preventMacBackScroll

它停止滚动OSX的Chrome浏览器（我无法find一种方法来禁用OSX的Safari），当你向上滚动。

我希望有帮助，请为您find的任何错误贡献项目，或者如果您find一种方法来禁用Safari的这种恼人的行为

Answer 2

为了允许元素（例如<div> ）使用触控板滚动，但是阻止浏览器回到上一页，您需要阻止浏览器的默认操作。

你可以通过监听元素上的mousewheel事件来做到这一点。 使用元素的滚动属性和事件上的deltaX / Y属性，可以防止并在低于零或高于宽度/高度时停止默认操作。

当您阻止整个滚动操作时，您也可以使用增量信息手动滚动。 这可以让你实际上达到零，而不是停在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); 

这适用于Mac上的Chrome，Safari和Firefox。 我没有在IE上testing过。

这个解决scheme只会影响到有问题的元素，并会让页面的其他部分正常工作。 所以你可以像预期的那样使用你的浏览器并返回一个页面，但是在这个元素的内部，当你不是故意的时候，你不会意外地返回。

Answer 3

是的，为了禁用默认行为（刷卡，捏等），你所要做的就是添加：

 event.preventDefault(); 

在你的情况下，只需注册touchMove监听器，并使用preventDefault（）那里（在function“touchmove”）。

 element.addEventListener("touchmove", touchMove, false); 

Answer 4

看看CSS3风格

 -ms-touch-action: none; touch-action: none; 

当使用的应用程序仅适用于支持HTML5 / CSS3的浏览器时，这完全适用于我。

Answer 5

我也使用jQuery的mousewheel，附加这个callback：

 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 } 

Answer 6

小猪支持closureshttps://github.com/micho/jQuery.preventMacBackScroll张贴由米乔我在Safari和铬都做到了这一点。 另外，我使它左右滚动和右滚动。

（对不起，这是咖啡的脚本。它不会很难翻译成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()