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.
- 3you gotta ask these things to learn.Rimian– Rimian2012-05-10 07:27:06 +00:00Commented May 10, 2012 at 7:27
- 2Possible duplicate of Making the main scrollbar always visibleBae– Bae2017-06-23 00:35:28 +00:00Commented Jun 23, 2017 at 0:35
Add a comment |
11 Answers
jQuery shouldn't be required. You could try adding the CSS:
body {overflow-y:scroll;} This works across the latest browsers, even IE6.
7 Comments
Julio Santos
I believe the
overflow-xand overflow-x have given me some pains in the past.
Nils Weinander
I think this will display the scrollbar only when there is overflow. To display the scrollbar always try body { overflow-y: scroll; height: 101%; }
Coin_op
You have this round the wrong way. If you set the overflow:auto then the scroll bars show if necessary. overflow:scroll always shows the scrollbars. If the content isn't long enough then the scrollbars are greyed out.
Mukesh
If I want only two elements to be displayed in HTML select and still want vertical scrollbar then overflow-y:scroll; does not work.
William
This works for me, but I also had to add
!important so that the Bootstrap modals I'm using won't hide the scrollbar. |
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.
1 Comment
Sasha
Indeed it's mac os specific
Just use CSS.
body { overflow-y: scroll; } 
1 Comment
Boaz
Note the OP is looking to show only the vertical scrollbar. The
overflow property in this case means the horizontal scrollbar would also be shown. You should use overflow-y instead.Tried to do the solution with:
body { overflow-y: scroll; } But I ended up with two scrollbars in Firefox in this case. So I recommend to use it on the html element like this:
html { overflow-y: scroll; } 
Comments
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()"> 
1 Comment
stevenvh
Well, OP asked for a Javascript solution, but that doesn't mean that's what he needs. This is a very bad solution to change a style. This is what CSS is for: Cascaded Style Sheets. In CSS it's just a single line, like the accepted answer shows.
set the overflow property of a containing div to scroll.
Comments
// Nothing to show herebody { height: 150vh; } ::-webkit-scrollbar { width: 15px; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .6); } /* Of course you can style it even more */<h1 style="margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-family: Helvetica, Arial, sans-serif;">Scroll</h1>
Here is a method. This will not only provide scrollbar container, but will also show the scrollbar even if content isnt enough (as per your requirement). Would also work on Iphone, and android devices as well..
<style> .scrollholder { position: relative; width: 310px; height: 350px; overflow: auto; z-index: 1; } </style> <script> function isTouchDevice() { try { document.createEvent("TouchEvent"); return true; } catch (e) { return false; } } function touchScroll(id) { if (isTouchDevice()) { //if touch events exist... var el = document.getElementById(id); var scrollStartPos = 0; document.getElementById(id).addEventListener("touchstart", function (event) { scrollStartPos = this.scrollTop + event.touches[0].pageY; event.preventDefault(); }, false); document.getElementById(id).addEventListener("touchmove", function (event) { this.scrollTop = scrollStartPos - event.touches[0].pageY; event.preventDefault(); }, false); } } </script> <body onload="touchScroll('scrollMe')"> <!-- title --> <!-- <div class="title" onselectstart="return false">Alarms</div> --> <div class="scrollholder" id="scrollMe"> </div> </body> 
Comments
Add the class to the div you want to be scrollable.
overflow-x: hidden; hides the horizantal scrollbar. While overflow-y: scroll; allows you to scroll vertically.
<!DOCTYPE html> <html> <head> <style> .scroll { width: 500px; height: 300px; overflow-x: hidden; overflow-y: scroll; } </style> </head> <body> <div class="scroll"><h1> DATA </h1></div> 
2 Comments
Badacadabra
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
Jed Fox
Please use the edit link to explain how this code works and don't just give the code, as an explanation is more likely to help future readers. See also How to Answer. source
This did the trick for me. The latter (property background) sets the scroll bar to be always visible and also accepts further customization.
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { border-radius: 50px; background: rgba(255, 255, 255, 0.5); } If the scroll appears/is needed, then, it is going to last forever.
Comments
I have been doing it this way:
.element { overflow-y: visible; } Painfully simple I know...
