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. User Avatar
    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

    • User Avatar
      Ganesh Kumar
      Permalink to comment#

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

  2. User Avatar
    Emmanuel
    Permalink to comment#

    Hi there I like this new snippets area very useful !

  3. User Avatar
    cheap bikinis
    Permalink to comment#

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

  4. User Avatar
    Holger
    Permalink to comment#

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

    PS: You have an awesome form.

  5. User Avatar
    Diego
    Permalink to comment#

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

    • User Avatar
      Joeri
      Permalink to comment#

      no.

    • User Avatar
      Captian
      Permalink to comment#

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

    • User Avatar
      Shaz3e

      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. User Avatar
    Karl
    Permalink to comment#

    Thanks, works a treat :)

    W00t!

  7. User Avatar
    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. User Avatar
    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. User Avatar
    jon
    Permalink to comment#

    Thank you!

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

  10. User Avatar
    Phillip
    Permalink to comment#

    What do You think about this snippet:

    html { min-height: 100%; padding-bottom: 1px; }
  11. User Avatar
    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. User Avatar
    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.

    Thanks.

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

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

  13. User Avatar
    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. User Avatar
    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. User Avatar
    nathan
    Permalink to comment#

    So where do I place this?

  16. User Avatar
    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. User Avatar
    Alan Henrique

    Nice job, man.

  18. User Avatar
    Dude
    Permalink to comment#

    Simple and nice! Thanks

  19. User Avatar
    Tom J Hume
    Permalink to comment#

    You sir, are a genius.

  20. User Avatar
    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 http://jigsaw.w3.org/css-validator/ without any errors.

  21. User Avatar
    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. User Avatar
    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. User Avatar
    deveedutta
    Permalink to comment#

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

  24. User Avatar
    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. User Avatar
    Agung Wiseso
    Permalink to comment#

    Can I use with jquery?

  26. User Avatar
    rohit
    Permalink to comment#

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

  27. User Avatar
    Bhavesh More
    Permalink to comment#

    nice one

  28. User Avatar
    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. User Avatar
    John
    Permalink to comment#

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

  30. User Avatar
    Satya Narayan Vyas
    Permalink to comment#

    Simple and nice! Thanks

  31. User Avatar
    fernando ingunza
    Permalink to comment#

    thanks remzai

  32. User Avatar
    tag
    Permalink to comment#

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

  33. User Avatar
    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. User Avatar
    David
    Permalink to comment#

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

  35. User Avatar
    Randy
    Permalink to comment#

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

  36. User Avatar
    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.

  37. User Avatar
    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. User Avatar
    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);
    }
    
    • User Avatar
      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*/
      body{
      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. User Avatar
    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. User Avatar
    izhar
    Permalink to comment#

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

  41. User Avatar
    Sebastian Schmal
    Permalink to comment#

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

    but this css, dont work :/

  42. User Avatar
    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 http://s.codepen.io/vulchivijay/debug/XdpgpY

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

  43. User Avatar
    Vijay
    Permalink to comment#

    I want vertical scroll on both side left and right, Is that possible ?

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag