Anne van Kesteren

overflow-x and overflow-y in Mozilla!

Remember forcing scrollbars from Jon Hicks? I can tell you that when Firefox 1.1 is widespread, you don't have to use the various (ugly) workarounds. Mozilla 1.8a4 will be the first browser to support it and of course, nightly Firefox and Mozilla builds will also have support for it. "It" are in this case two CSS properties: overflow-x and overflow-y. Originally invented by Microsoft as an addition to overflow, now implemented in Mozilla thanks to David Baron (blogline), who does a lot of other wonderful stuff too, but this one is (a lot) more interesting to you. Although the CSS3 box model module in which these properties are defined is still a working draft, Mozilla does support them without prefix, because they are already widely used. (When Microsoft added support for them there wasn't a standard for naming new CSS properties (and values). Actually, the standard that defines this is still candidate recommendation so Microsoft just named them the way they liked it and you can't really blame them for that.)

If you like to have a persistent (vertical) scrollbar (I don't) for web pages you can change your Mozilla CSS file and add:

:root{
 overflow-y:scroll;
}

That way every document you view will have a horizontal scrollbar in the latest Firefox and Mozilla builds and Firefox 1.1 and Mozilla 1.8a4 and later. Since Firefox 1.0 is based on Mozilla 1.7 it will not have support for those properties.

Comments

  1. Thats a nice addition!
    Always wanted to use these;)

    Posted by Christoph Wagner at

  2. i think you mean vertical scrollbar. great stuff, for those who want/need it (putting aside for a moment the fundamental discussion of whether or not page authors should actually have any power over that aspect of the GUI...

    Posted by patrick h. lauke at

  3. Maybe I should mark me posts as 'working draft' when I post them before they become 'post' to have an excuse for such errors.

    Posted by Anne at

  4. Off topic, but I just wanted to say that I loved your idea of placing a Bloglines Subscribe link right next to where a blog is linked in the text. I have the habit of subscribing to every blog I see mentioned in those I already read (bad habit, perhaps, since I'm always getting flooded with unread items). I will start doing that on my blog too (as soon as I restart blogging in English).

    Posted by Jonas Galvez at

  5. Excellent! I particularly hated Jon Hick's methods because they always made the page moveable by just one pixel, and none of them were easy to override with just a single rule. Plus, I just don't like the general idea of an unnecessary scroll bar — it's one of those little things that really bugged me about IE. At last I'll be able to add to my user stylesheet:

    :root {     overflow-y: auto !important; }

    So I don't have to put up with an author making annoying decisions for me! Thank you, this is great news. But, I still believe that this should be the user's decision: Those that want it for every site can set it, those that don't, don't have to; and no-one should have to rely on the author making it for them, without regard for who does and does not like it.

    Posted by Lachlan Hunt at

  6. I've always wondered why the overflow property wasn't more specific (or, if you will, a shorthand). It seems like a silly limitation.

    Mind you, "x" and "y" don't seem to fit with the rest of CSS, either, especially in light of vertical text in CSS3. One would think the overflow direction should change with the text direction.

    Posted by J. King at

  7. J. King, you might want to post that on www-style.

    Posted by Anne at

  8. I guess I could make use one of these properties. In the past, I have had fixed width centered designs. Some pages were short enough that the scrollbar wasn't necessary, so Mozilla decides not to render it. But, when you go to a page which needs the scrollbar, it appears, and it seems like the design has shifted to the left about 10px. To remedy this illusion of not being centered site-wide, you can use one of these properties to keep the scrollbar there, all the time.

    Posted by Rick Yribe at

  9. Users of Opera can go in the other direction, and turn *off* the scrollbar if they so choose, via the Window preference options - the page is still scrollable with the mousewheel and the page up/down buttons.

    Posted by paul haine at

  10. Though one visit to http://www.ftrain.com/ just reminded me why the scrollbars can come in fairly useful sometimes...

    Posted by paul haine at

  11. Eindelijk, eindelijk komt in Firefox 1.1 overflow-x en overflow-y ondersteuning, zo is te lezen op Anne’s blog.

    Posted by Switch − The dumbest place on the interweb! at

  12. Just got to wait for Opera and Safari to implement it too ;o)

    Posted by Jon Hicks at