CSS Code To Force Browser to Always Show Vertical Scrollbar

css-code-show-scroll-barOn all the popular web browsers, if the content of the page is longer then the window, then the right scroll bar is displayed. But if the content of the window is less then the height of the browser’s (monitor’s) window, then the right scroll bar is not displayed.

This makes sense. But if your website is center aligned then it will make the website jump to right and left depending on whether the content is longer then the window or not.

To prevent this issue, you can force Chrome, Firefox, Safari and Opera to always display the right scroll bar. Use the following code snippet to do this,

html {overflow-y:scroll;}

Now the browser will always show the right, vertical scroll bar, thus preventing the jump effect.

Note that this code doesn’t work in Internet Explorer at the time of writing.

Leave a Comment