Scrolling DIV in FireFox

Hey,

I am updating my web pages so that they work in FireFox but I have come across a problem with my divs. I am unable to scroll use the mouse wheel. The scroll bars are visible and I can manually move them up and down but it just doesnt seem to work using the mouse wheel. This feature works fine in IE.
I have set the styles of my divs to overflow:auto.

If anyone has experienced this problem before I’d ove to hear how to fix it!
I’ve got to the stage where I’m thinking its just not possible to do this in FireFox.

Cheers,

Chris

Use of the scroll wheel in Firefox is determined in the user’s browser by:
Tools->Options->Advanced->Browsing
I do not know if it’s behavior can be forced from a web page

I this option switched on. I use firefox all the time and I dont seem to come across this problem on the web…

I did a :google: search for - firefox css overflow scroll. It seems that the browsers do not implement the overflow property the same, and it requires a lot of hacking to get it to work. There is also a problem with different browser versions and standards/quirks modes. I did find this, maybe it will help?

style="overflow:-moz-scrollbars-horizontal;overflow-x:scroll;overflow-y:hidden;"
style="overflow:-moz-scrollbars-vertical;overflow-x:hidden;overflow-y:scroll;"

Elements with overflow:auto cannot be scrolled with the mouse wheell in Firefox 1.0.x. This has been fixed after 1.0 though and will work in the next major relseae, 1.5.

There is a work-around for this, a certain Morten Nilsen came up with the following solution:


<html>
  <head>
    <title>Mozilla bug #9728 workaround v.2</title>
    <style type="text/css">
      div {
        width: 200px;
        height: 100px;
        overflow: auto;
        border: solid 1px black;
      }
    </style>
    <script type="text/javascript">
      function fixScroll(div) {
        var s = div.scrollTop;
        div.childNodes[1].focus();
        div.scrollTop = s;
      }
    </script>
  </head>
  <body>

    <div onmouseover="fixScroll(this);">
      <a></a>
      Long text Long text Long text Long text Long text Long text Long text Long text
      Long text Long text Long text Long text Long text Long text Long text Long text
      Long text Long text Long text Long text Long text Long text Long text Long text
      Long text Long text Long text Long text Long text Long text Long text Long text
      Long text Long text Long text Long text Long text Long text Long text Long text
      Long text Long text Long text Long text Long text Long text Long text Long text
    </div>
  </body>
</html>


Thanks for sharing that, Pepejeria. :slight_smile: I was unaware of that work-around.

So I tried to implement this, but found a caveat about this:
If there’s a Div in the made-scrollable DIV it will not scroll any more. Is this correct?
So, I’ll and anybody else will have to wait for the 1.5-Firefox.

Greets
Wolfgang