I am working on a UI that uses horizontal scrolling in a div element (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.
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 div worked on Safari, too. I’ve added event handlers and html which probably broke scrolling, but I have no clue what made it change.)
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.)
Update: I tried adding jQuery.mousewheel and it somehow fixed the problem. (I just attached a empty event handler on .mousewheel().) I am still looking for a definitive answer.
I’ve been looking for a solution for days. What I have so far is in this plugin:
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.
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