What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » CSS » Force Vertical Scrollbar

Force Vertical Scrollbar

html {
       overflow-y: scroll;
}

This is invalid CSS, but it works in everything except Opera. The reason for this is to prevent "centering jumps" when navigating back and forth between pages with enough content to have a vertical scroll bar and pages that do not.

Subscribe to The Thread

  1. Eddie Monge

    There’s a specific one for Mozilla: overflow: -moz-scrollbars-vertical;

    IE I think always shows the vert scroll bars

    Reply ↓
  2. Emmanuel

    Hi there I like this new snippets area very useful !

    Reply ↓
  3. cheap bikinis

    Thanks for the visit and the kind comment.have a wonderful day

    Reply ↓
  4. Holger

    It works perfectly in Opera 11.01. Thanks for the tip!

    PS: You have an awesome form.

    Reply ↓
  5. Diego

    This is great, but it creates a double scrollbar, doesn’t it?

    Reply ↓
  6. Karl

    Thanks, works a treat :)

    W00t!

    Reply ↓
  7. Chris

    what about

    height: 101% ?

    this was an an advice published in the blog of a CSS professional.
    i dont have the link, but you can seach in google for this code.

    Reply ↓
  8. Steve

    Chris; An inelegant solution. overflow-y:scroll; adds a disabled scrollbar if the page height or content size is less than, or becomes less than the browser size. height:101%; (and other similar solutions, like margin: 0,0,1px;) enable that scrollbar and lets the user scroll a few pixels. It may seem moot, but I like my scrollbars disabled when there’s no need to use them for scrolling purposes.

    Reply ↓
  9. jon

    Thank you!

    If this is invalid, someone should rethink what is valid again.

    Reply ↓
  10. Phillip

    What do You think about this snippet:

    html { min-height: 100%; padding-bottom: 1px; }
    Reply ↓
  11. tom

    I’m using this to force the scroll bar:

    html {heigth: 100%; margin-bottom: 1px}

    Quite similar to Phillips solution.

    Reply ↓
  12. Designer Maynard

    This works great for sites that use jQuery and slide up and down. I used it on my final for a JavaScripting class. It keeps the bar there so when the page changes from one with lots of content to one with little content the whole page doesn’t shift to the left or right.

    Thanks.

    Here’s an example that might help more than my explanation… :P

    http://tymayn.com/school/jsFinal/

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~