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.
There’s a specific one for Mozilla: overflow: -moz-scrollbars-vertical;
IE I think always shows the vert scroll bars
I want box vertical scrolling model in Jquery. can Please help to me.
Hi there I like this new snippets area very useful !
Thanks for the visit and the kind comment.have a wonderful day
It works perfectly in Opera 11.01. Thanks for the tip!
PS: You have an awesome form.
This is great, but it creates a double scrollbar, doesn’t it?
no.
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
Thanks, works a treat :)
W00t!
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.
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.
Thank you!
If this is invalid, someone should rethink what is valid again.
What do You think about this snippet:
I’m using this to force the scroll bar:
html {heigth: 100%; margin-bottom: 1px}
Quite similar to Phillips solution.
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/
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 …
Any CSS file you have.
If you don’t have any external CSS files, in the tag.
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; }
Yup. Tried with chrome and got two scrollbars. Your solution solved the problem.
So where do I place this?
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.
Nice job, man.
Simple and nice! Thanks
You sir, are a genius.
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.
^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.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!!
I never saw it in the HTML5 boiler plate though.. can it be included there ?
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.
you sir are a genius
Can I use with jquery?
How to show the vertical scroll bars when select height is very low?
nice one
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?
what a horribly long set of threads for such a basic request
Simple and nice! Thanks
thanks remzai
just two words overflow-y and scroll , works wonders. Thanks
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:
This was driving me nuts! Thank you so much for sharing the solution: it works perfectly.
Where do you put the code? Inside the body? Or inside the head?
In your css style sheet Randy :)
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.
You can just reset body’s overflow-y to “hidden” or “initial” to avoid the double-scrollbars:
I’m surprised nobody suggested this yet.
I hope it helps :)
OSX Lion -_-
Doesn’t work this code on firefox. what is firefox scroll style properties.? how to adjust vertical scroll bar height.?
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?
i want the screen to be scrolled automatically. is this possible ?
i need a scroll in IE 11 ever right!
overflow-y: scroll;
but this css, dont work :/
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.
I want vertical scroll on both side left and right, Is that possible ?
i need tips for Window has minimize enable the scrollbar otherwise disable the
scrollbar
Hi. I entered the code below into custom css in my theme but for some reason, the vertical scroll bar still seems to disappear after I load the site. Would welcome thoughts on any fixes to resolve this issue. Thanks. Vimal
html {
overflow-y: scroll;
}