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

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

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

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

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

6 Solutions collect form web for “任何方式来防止OS X狮子Safari浏览器上的水平滚动触发滑回手势?”

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

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

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

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

为了允许元素(例如<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只会影响到有问题的元素,并会让页面的其他部分正常工作。 所以你可以像预期的那样使用你的浏览器并返回一个页面,但是在这个元素的内部,当你不是故意的时候,你不会意外地返回。

是的,为了禁用默认行为(刷卡,捏等),你所要做的就是添加:

 event.preventDefault(); 

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

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

看看CSS3风格

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

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

我也使用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 } 

小猪支持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() 
  • 以编程方式更改animation规则中的webkit转换值
  • 扫描信用卡选项在iOS8 Safari上何时可用?
  • iPhone / iPod touch的Safari iOS 7中无法隐藏导航栏
  • 我如何强制WebKit重绘/重绘传播样式更改?
  • 如何在Chrome或Safari中为缩小的JS函数设置断点?
  • 某些字体大小在Safari(iPhone)上呈现较大
  • 如何防止尝试打开未安装的原生应用程序的iOS Safari浏览器警报?
  • 我如何从iPhone应用程序启动Safari?
  • 禁用input文字颜色
  • 从用户select的文本中返回HTML
  • 移动Safari后退button