How to always show the vertical scrollbar in a browser?

I want to always show vertical scrollbar in my webpage. Is it possible using javascript? I think it is possible using javascript or jQuery. I want vertical scrollbar whether there is enough content to show or not.

thanks.


Solution 1:

jQuery shouldn't be required. You could try adding the CSS:

body    {overflow-y:scroll;}

This works across the latest browsers, even IE6.

Solution 2:

Just a note: In OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will only show when being used. They will disappear when not in use. So if any the solutions above don't appear to be working that might be why.

This is what you'll need to fix it:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

You can style it accordingly.

Solution 3:

Just use CSS.

body {
  overflow-y: scroll;
}

Solution 4:

try calling a function on the onload method of your body tag and in that function change the style of body like this document.body.style.overflow = 'scroll'; also you might need to set the width of your html as this will show horizontal scroll bars as well

your html file will look something like this

<script language="javascript">
    function showscroll() {
        document.body.style.overflow = 'scroll';
    }
</script>
</head>
<body onload="showscroll()">

Solution 5:

set the overflow property of a containing div to scroll.