Question

First of all, this problem only happens in Firefox.

Check this example page to understand the problem:
-removed-

Select any page besides home. The window will scroll to page. You can then scroll down using the mouse wheel. This works fine. BUT if you grab the scroll bar on the right with your mouse it will jump back to the “home page” (the top left, first element, which is part of the ENTIRE page/website).

The offending code is:

#content{

overflow-x: hidden; /* <<problem maker */
overflow-y: auto;
width:100%;
background-color:white;
position:relative;
height:400px;
float:left;
min-width: 900px;

}

… if I unhide overflow-x (overflow-x: auto;) everything works properly, but I get an undesired horizontal scroll bar.

I am using the jquery ScrollTo plugin that is animating the position of the div inside #content to create the “sliding” effect. Apparently, because Firefox is “resetting” to the default load position, it doesn’t think it should have ever allowed me to “slide” horizontally.

Is this a Firefox bug? Or a bug in the ScrollTo plugin? Or maybe even jQuery?

Any ideas of how to fix this? Workarounds ideas?

Any help is much appreciated! Thanks!

Answer 1

Workaround:
Hide the scroll bar under another div. Lame, but works in my case.