How to force vertical scrollbar?

vertical_scrollbar

About this article: Posted in: Learned along the way
By: Blockcoder ( Admin ) / 10.12.2012
Stats: 2 responses / Views: 1,960
Tags: ,

What is this vertical scrollbar – thing?

Hi there, here’s a new block of code, so called code snippet and it is about “how to force your browser’s scrollbar to fix to the right side” – and stay there.

This situation is familiar and maybe needed when you have content that differs with it’s height property. In some subpage it throws the scrollbar and in another it doesn’t because of the different height of your content. It causes this annoying vertical “bumping”. It is not a good thing. You want to get rid of it. I know. It is simple.


How to force the scrollbar to the right side of your browser?

Well, this may be more simplier than you can imagine. Let’s mention one thing before doing any css: IE always forces the scrollbar in the right side of your browser. We don’t know why, but it does. Other browsers doesn’t. There are different methods for different browsers you can follow. You will do the forcing with CSS.

Write this down to your HTML-tag in css. Like this:


html {
    overflow-y: scroll;
}

The specification “overflow-y” was added in CSS3.
But, want to be more specific? Let’s do it for only Mozilla browser:


html {
   overflow: -moz-scrollbars-vertical;
}

So, that’s it. It wasn’t so hard?


There are 2 responses on this post

GW
On second note - MAKE SURE YOU INSERT THIS CODE SNIPPET INTO YOUR CSS STYLES AREA.
GW
For some reason, this only works on about half of my pages...

Leave a Reply

Your email address will not be published. Required fields are marked *

23,651 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>