Grow your CSS skills. Land your dream job.

Last updated on:

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.

Comments

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

    IE I think always shows the vert scroll bars

  2. Permalink to comment#

    Hi there I like this new snippets area very useful !

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

  4. Holger
    Permalink to comment#

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

    PS: You have an awesome form.

  5. Permalink to comment#

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

    • Joeri
      Permalink to comment#

      no.

    • Captian
      Permalink to comment#

      Iceweasel browser 17. It really does. You are right.

    • I think you should use something like this it won’t harm you.

      .element > tag{
      overflow-y: scroll;
      height:400px;
      }

      Please change .element and tag appropriately

  6. Permalink to comment#

    Thanks, works a treat :)

    W00t!

  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.

  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.

  9. jon
    Permalink to comment#

    Thank you!

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

  10. Permalink to comment#

    What do You think about this snippet:

    html { min-height: 100%; padding-bottom: 1px; }
  11. tom
    Permalink to comment#

    I’m using this to force the scroll bar:

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

    Quite similar to Phillips solution.

  12. 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/

  13. nathan
    Permalink to comment#

    Where do i add this bit of code? cause i hate when the screen jumps from not having a scroll bar to having one.

    Thanks for any suggestions …

  14. Permalink to comment#

    From my experience, this creates a dual scrollbar on certain browsers. Due to the fact that in some browsers the scrollable element is the Html element and in others it is the Body element. As far as I have found the only solution that doesn’t cause an actual usability problem is:

    body { height: 100%; margin-bottom: 1px; }

  15. nathan
    Permalink to comment#

    So where do I place this?

  16. Permalink to comment#

    Thank you, I have tried many different methods with limited success. Your method worked great in all browsers including my Opera “html {overflow-y: scroll; } ”

    As to Nathan, just place it in your style sheet pretty much anywhere but I usually add my changes to the bottom and add a comment as to what I am doing:

    /* ———DMuirDesigns——— added html {overflow-y: scroll; } to always create a scrollbar to stop scrollbar shift —— */

    It is good to do a search in the CSS to see if “html” is being used so you can just add to it.

  17. Alan Henrique

    Nice job, man.

  18. Permalink to comment#

    Simple and nice! Thanks

  19. You sir, are a genius.

  20. Many thanks for the best solution I’ve come across for this – short and simple, and the scrollbar is disabled it not needed, beautiful!

    So why is it considered invalid? I checked it with http://jigsaw.w3.org/css-validator/ without any errors.

  21. Who?
    Permalink to comment#

    ^It’s not invalid; this is just an old article. overflow-y wasn’t in the CSS 2.1 specification but it was added in CSS3.

  22. Debbie
    Permalink to comment#

    THANK YOU! I’ve been going crazy parsing and testing everything in my css and html thinking I’d done something wrong in my coding, not realizing that the scroll bar is causing the few pixel shift between pages!!

  23. Permalink to comment#

    I never saw it in the HTML5 boiler plate though.. can it be included there ?

  24. remzai
    Permalink to comment#

    Don’t use

    body,html{ overflow-y:scroll;}

    instead of this use

    html{overflow-y:scroll}
    or
    body{overflow-y:scroll}

    tested both same results.

  25. Can I use with jquery?

  26. rohit
    Permalink to comment#

    How to show the vertical scroll bars when select height is very low?

  27. Bhavesh More
    Permalink to comment#

    nice one

  28. Ankur
    Permalink to comment#

    Can you tell me a way to automatically scroll a php page to the bottom? it keeps on adding new data which comes at the bottom, to read which i have to scroll down. is there a way that the page automatically scrolls to the bottom to display the new entry?

  29. John
    Permalink to comment#

    what a horribly long set of threads for such a basic request

  30. Satya Narayan Vyas
    Permalink to comment#

    Simple and nice! Thanks

  31. fernando ingunza
    Permalink to comment#

    thanks remzai

  32. tag
    Permalink to comment#

    just two words overflow-y and scroll , works wonders. Thanks

  33. Joe Miller
    Permalink to comment#

    Just a note:

    Using overflow-y: scroll will create a second, inner, scroll bar if you’re using backspace-visibility: hidden for anti-aliasing in Chrome or Safari Mobile…. (That was a mouthful)

    Works great otherwise.

    P.S. Codepen.io doesn’t show this bug:

  34. David
    Permalink to comment#

    This was driving me nuts! Thank you so much for sharing the solution: it works perfectly.

  35. Randy
    Permalink to comment#

    Where do you put the code? Inside the body? Or inside the head?

  36. Nils
    Permalink to comment#

    Now we just need a solution for iOS Safari… this will get your somewhere near, but not really:

    http://fiddle.jshell.net/desandro/X6zfS/

    It does work on everything but the body/html tag though.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".