«
»

CSS trick: Always show scrollbars

I worked on a site a few weeks ago where the user wanted visible scrollbars no matter how much space the content takes up on the page. Internet Explorer is happy to oblige, just put in a overflow: scroll; in your CSS and your good to go. However, Mozilla Firefox wouldn’t play ball. A bit of Googling revealed Mozillas own implementation -
overflow: -moz-scrollbars-vertical;.

So to sum up, add the following CSS code to your site if you want the scrollbars visible at all times:

html {
     overflow: -moz-scrollbars-vertical;
     overflow: scroll;
}

This entry was posted on Wednesday, March 28th, 2007 at 19:03 and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

12 Responses to “CSS trick: Always show scrollbars”

  1. ravi Says:
    November 7th, 2007 at 12:17

    Its really a good trick but doesn’t work in opera Please if you can tell it for opera

  2. Marty Says:
    May 5th, 2008 at 13:11

    Thx for this :) Its working perfectly – IE, FF, Opera, Safari. Thanx again :)

  3. Rick Says:
    February 4th, 2009 at 1:58

    Thanks so much… exactly what I was looking for!

  4. Jimmy K. Says:
    April 21st, 2009 at 22:17

    This code works well (I’m not going to lie, I’ve used it a lot), but it won’t validate in CSS 2.1.

  5. Mordy R. Says:
    April 28th, 2009 at 15:51

    Great Little Piece of code.
    It creates a horizontal scroll bar on the bottom of the page as well.

  6. Rob Koster Says:
    June 23rd, 2009 at 9:03

    for vertical only scrollbar:

    html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll; //-y stands for the vertical scrollbar
    }

  7. Brian Says:
    July 10th, 2009 at 3:14

    Thanks for the vertical only tip Rob. I had a few pages in a center aligned website that didn’t require a scroll bar. Those pages lined up slightly left of the other pages which caused a jerky reaction when browsing. Your tip fixed that. Thanks!

  8. Jonas Says:
    August 3rd, 2009 at 9:12

    @Rob: That causes the horisontal scrollbar to dissapear even if the browser window is too small for the page width. But that´s a easy fix:

    html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
    overflow-x: auto;
    }

  9. Paul Says:
    September 3rd, 2009 at 7:32

    @Jonas

    To bad its not working in older IE versions. There i get an extra scrollbar and the normal one is not working anymore. I didn’t find a fix for that yet.

  10. aNj Says:
    September 10th, 2009 at 16:51

    This is working everywhere:

    html{height: 101%}

  11. Jason Says:
    September 29th, 2009 at 17:16

    Perfect thanks :) works well … (but not in Google chrome)

  12. Liz Says:
    December 5th, 2009 at 8:26

    Thanks a bunch!

Leave a Reply