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.
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.
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 …
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; }
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-ywasn’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.
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?