Stop Firefox by resetting the horizontal scroll position when the overflow is “hidden”?

Question

I have a horizontally scrollable div with sections inside. I use the Ariel Flesler scrollTo plugin to go from one section to another.

See: http://jsfiddle.net/carienf/qZeEe/

The violin works fine in IE 9, Safari 5.1, Opera 11.5, and Chrome 14 (all recent versions). I can click on the link to go to the corresponding section and scroll or mouse wheel in it.

Problem: In Firefox 7 (and earlier), when I scroll to page 2 or section 3, and then scroll down using the scroll bar , my position is reset to the first section . This also happens when resizing the browser window. If I scroll using the mouse wheel, Firefox behaves (in other words, I stay in the current section).

My question is pretty much an exact repetition of this question: The problem of mixing overflow-x, FireFox and Javascript

Only, the accepted answer (which should show the visibility of the horizontal scrollbar) does not work for my particular case. In addition, the one who posted the question deleted his example. I really need this scrollbar to stay hidden, and I really don't like the idea of ​​hiding it behind a div.

Is there a way (other than setting the overflow to "auto") to stop Firefox from resetting my scroll position? Or any other way to hide the scrollbar?

UPDATE : Updated Firefox to 8.0 (still beta) and then the behavior is compatible with other browsers.

Answer 1

I see a couple of options.

• copy the scroll bar. Makes some measurements and you have to position absolutely.
• Add a second div that performs vertical scrolling. This breaks your code as it stands now, but it fixes the scroll issue. jsfiddle.net/s2YFM

Answer 2

I ran into the same problem. When my "modal window" appears, I set html.noscroll { overflow: hidden } , which, unfortunately, causes the window to scroll up.

Here is the only solution I could make:

 function RemoveScrollbar(html) { var scrollTop = html.scrollTop; html.addClass('noscroll'); html.scrollTop = scrollTop; } 

This is the MooTools code, but it’s super easy to convert to jQuery or other frameworks.