Any way to prevent horizontal scrolling by scrolling backward in OS X Lion Safari?

Question

I am working on a user interface that uses horizontal scrolling in a div element (using overflow: scroll ). I cannot scroll left because it will start the animation to return to the story. Likewise, I cannot scroll right when there is a website to go forward.

It works well in other browsers, including Chrome on OS X Lion, which also supports scrolling to return to history. (At some point when I was developing, scrolling in a div also worked on Safari. I added event handlers and html that probably broke the scrolling, but I don't know what changed it.)

Ideally, I would like to prevent going back or forward in the story when scrolling through a specific div (even when it reaches the end).

Update: I tried to add jQuery.mousewheel and this somehow fixed the problem. (I just bound an empty event handler to .mousewheel() .) I'm still looking for the final answer.

Answer 1

I have been looking for a solution for several days. What I still have in this plugin:

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

It turned off scrolling for OSX Chrome (I couldn't find a way to turn it off for OSX Safari) when you scroll left and up.

I hope this helps, please contribute to the project with any bugs found or if you find a way to disable this annoying behavior for Safari

Answer 2

To allow an element (for example, a <div> ) to scroll using the trackpad, but not to allow the browser to return to the previous page, you need to prevent the default browser from working.

You can do this by listening to the mousewheel event on the element. Using the element’s scroll properties and deltaX / Y properties in an event, you can prevent and stop the default action when it falls below zero or above width / height.

You can also use delta information to manually scroll when you prevent the entire scroll operation. This allows you to actually go to zero, rather than stopping at 10 pixels or something like that.

 // 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 have not tested IE.

This decision will only affect this element and allow the rest of the page to behave as usual. Thus, you can use your browser as expected and return the page, but being inside the element, you will not accidentally return when you do not want.

Answer 3

Yes, to disable the default behavior (swipe, pinch, etc.), all you have to do is add:

 event.preventDefault(); 

In this case, just register the touchMove listener and use preventDefault () there (in the "touchmove" function).

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

Answer 4

Check out the CSS3 style

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

This works fine for me when the application in use is only expected in browsers that support HTML5 / CSS3.

Answer 5

I also used jQuery mousewheel, attaching this 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

Piggy backtracks from https://github.com/micho/jQuery.preventMacBackScroll sent by micho. I made this possible both in safari and in chrome. In addition, I did this both for left-side scrolling and for right-side scrolling.

(Sorry this is in coffeescript. It's easy to translate back to 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()