4

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.

Community
  • 1
  • 1
  • I viewed your example in Chrome 14 & the position is scrolled back to top as well (like FF). – vantrung -cuncon Oct 03 '11 at 20:19
  • 1
    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. http://jsfiddle.net/s2YFM/ – Hemlock Oct 04 '11 at 02:42
  • @vantrung -cuncon. I'm not sure what you mean. You say: "...in Chrome 14 the position is scrolled back to the top...". Are you referring to a vertical scroll? When does Chrome 14 scroll "to the top"? I have tested the fiddle in Chrome 14 and it behaves correctly. My problem is that my *horizontal* position is reset to the first section when I am in Section 2 or 3 and then use the scrollbar in FF. In Chrome 14 my horizontal position only changes when I click one of the Section links, which is the desired behaviour. –  Oct 04 '11 at 10:35
  • @Hemlock. Nice one. I've done (1.) for now and clipped the scrollbar out. Your fiddle works nicely, but it'll be a bit harder to use (the real-life site is a bit more involved). I will vote your suggestion up if you provide it as an answer. –  Oct 04 '11 at 10:37
  • @cfouche Oh, I thought it was the vertical scrollbar. When I scroll the content down, then click another section, the scrollbar of new section auto-scroll to top. Sorry. – vantrung -cuncon Oct 04 '11 at 10:41
  • @vantrung-cuncon. Relieved that you didn't discover another quirky behaviour. :) –  Oct 04 '11 at 11:49

2 Answers2

0

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.

Scott Rippey
  • 15,614
  • 5
  • 70
  • 85
0

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
Hemlock
  • 6,130
  • 1
  • 27
  • 37