Question

IE6, IE7, and IE8 display a vertical scroll bar for the page by default even if it is not scrollable. Chrome and Firefox do not do this (I'm assuming Opera and Safari do not as well). You can accomplish this same behavior in FireFox using the CSS:

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

Is there any way to force the visible scrollbar in the other three browsers? Or even better, a standard way of doing it?

Was it helpful?

Solution

Update

You may (in addition) need to include -ms-overflow-y and/or -moz-scrollbars-vertical, as mentioned in this other StackOverflow post:

html {
    overflow: -moz-scrollbars-vertical; /* For FF */
    -ms-overflow-y: scroll; /* For IE */
    overflow-y: scroll; /* For others & old IE */
}

Original

html { overflow-y: scroll; }

See "overflow-y" at W3Schools

Tested & verified (successfully) in:

  • FF 7
  • Chrome 15
  • IE 5+6+7+8+9+10(platform preview) w/IETester
  • Opera 11.52
  • Safari/Win 5.1.1

Full example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    html { overflow-y: scroll; }
</style>
</head>
<body>
    Test content
</body>
</html>

OTHER TIPS

html { height: 100%; margin-bottom: 1px; }

See Forcing scrollbars (now even better) for more information.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top