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.


  1. Eddie Monge
    Permalink to comment#

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

    IE I think always shows the vert scroll bars

    • Ganesh Kumar
      Permalink to comment#

      I want box vertical scrolling model in Jquery. can Please help to me.

  2. Emmanuel
    Permalink to comment#

    Hi there I like this new snippets area very useful !

  3. cheap bikinis
    Permalink to comment#

    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. Diego
    Permalink to comment#

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

    • Joeri
      Permalink to comment#


    • Captian
      Permalink to comment#

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

    • Shaz3e

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

      .element > tag{
      overflow-y: scroll;

      Please change .element and tag appropriately

  6. Karl
    Permalink to comment#

    Thanks, works a treat :)


  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. Phillip
    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. Designer Maynard
    Permalink to comment#

    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.


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

  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. unabacus
    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. DMuir
    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. Dude
    Permalink to comment#

    Simple and nice! Thanks

  19. Tom J Hume
    Permalink to comment#

    You sir, are a genius.

  20. Mr Love
    Permalink to comment#

    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 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. deveedutta
    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


    tested both same results.

  25. Agung Wiseso
    Permalink to comment#

    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. 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:

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

  37. Renato Frota

    You can just reset body’s overflow-y to “hidden” or “initial” to avoid the double-scrollbars:

    html {
        overflow-y: scroll;
        overflow-x: hidden; /* I do NOT want hz scroll */
    body {
        overflow-y: initial; /* avoid the double scroll */

    I’m surprised nobody suggested this yet.

    I hope it helps :)

  38. Ashley

    OSX Lion -_-

    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    • Roshin
      Permalink to comment#

      Doesn’t work this code on firefox. what is firefox scroll style properties.? how to adjust vertical scroll bar height.?

      /* Chrome and Safari */
      ::-webkit-scrollbar {
          width: 8px;
      /* Track */
      ::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px #292121;
          background: #292121;
      /* Handle */
      ::-webkit-scrollbar-thumb {
          background: #FE505A;
          -webkit-box-shadow: inset 0 0 6px rgba(255, 149, 155, 0.66);
      ::-webkit-scrollbar-thumb:window-inactive {
          background: rgba(255, 0, 0, 0.4);
      /*IE 8 plus*/
      scrollbar-base-color: #FE505A;
      scrollbar-base-color: #FE505A;
      scrollbar-3dlight-color: #FE505A;
      scrollbar-highlight-color: #292121;
      scrollbar-track-color: #292121;
      scrollbar-arrow-color: black;
      scrollbar-shadow-color: #FE505A;
      scrollbar-dark-shadow-color: #FE505A;
  39. Lucky G.

    All these solutions work only when height of box is to certain minimum size=”6″ or height:86px. Does any one know how to make scroll bar always appear in IE11. This was working fine in IE8. Also the height if scroll bar itself is so much that scrolling is basically ineffective even at size=”6″. How to make it thin?

  40. izhar
    Permalink to comment#

    i want the screen to be scrolled automatically. is this possible ?

  41. Sebastian Schmal
    Permalink to comment#

    i need a scroll in IE 11 ever right!
    overflow-y: scroll;

    but this css, dont work :/

  42. vijay
    Permalink to comment#

    Guys, I had a issue in Mac browsers scrollbar disappeared when I insert mouse to mac book, got a white colour box top right colour in vertical scroll div at first time only. after I refresh the page i could able to see scrollbar. I could see this issue in many sites.

    here is the demo link

    you guys look at this. Let me know how to fix it.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.