当溢出被“隐藏”时，停止Firefox重置水平滚动位置？

Question

I have a horizontally scrolling div with sections inside. I'm using Ariel Flesler's scrollTo plugin to scroll from one section to another.

Please see: http://jsfiddle.net/carienf/qZeEe/

The fiddle works perfectly in IE 9, Safari 5.1, Opera 11.5 and Chrome 14 (all the latest versions). I can click on a link to scroll to the corresponding section and scroll or mousewheel around in it.

Problem: In Firefox 7 (and earlier), when I have scrolled to Section 2 or Section 3 and then scroll down using the scrollbar , my position is reset to the first section . This also happens when I resize the browser window. If I scroll using the mousewheel, Firefox behaves (in other words, I stay in the current section).

My question is pretty much an exact repeat of this question: Problem mixing overflow-x, FireFox, and Javascript

Only, the accepted answer (which is to allow the horizontal scrollbar to be visible) doesn't work for my specific case. Also, the guy who posted the question has removed his example. I really need that 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 overflow to "auto") to stop Firefox from resetting my scroll position? Or some other way to hide the scrollbar?

UPDATE : Updated Firefox to 8.0 (still a beta version) and then the behaviour is consistent with the other browsers.

Answer 1

I just ran into the same exact issue. When my "modal window" pops up, I set html.noscroll { overflow: hidden } , which unfortunately causes the window to scroll-to-top.

Here's the only solution I could make work:

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

This is MooTools code, but super simple to convert to jQuery or other frameworks.

Answer 2

I can see a couple of options.

1. clip off the scroll bar. Takes some measuring and you have to position absolutely.
2. Add a 2nd div outside that does the vertical scrolling. That breaks your code as it currently stands, but it does resolve the scrolling problem. jsfiddle.net/s2YFM