Best IT Recipes

How to always show vertical scrollbar in browser?

I want to always show a vertical scroll bar on my web page. Can javascript be used? I think you can use javascript or jQuery. I want a vertical scroll bar whether there is content to show or not.

thank.

+42
html css browser
Oct 29 '10 at 8:03
source share
7 answers

jQuery is not required. You can try adding CSS:

body {overflow-y:scroll;}

This works in recent browsers, even in IE6.

+95
Oct 29 '10 at 8:07
source share

Note only: In OS X Lion, an overflow set to "scroll" behaves like an auto in that scroll bars will only be displayed when used. They will disappear when not in use. Therefore, if any of the solutions above do not work, perhaps, therefore.

Here is what you need to fix:

 ::-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 configure it accordingly.

+20
Jul 07 '15 at 20:15
source share

Just use CSS.

 body { overflow-y: scroll; }
+12
Oct 29 '10 at 8:11
source share

set the overflow property of the containing div to scroll .

+3
Oct 29 '10 at 8:11
source share

try calling the function in the onload method of your body tag, and in this function change the body style, like this document.body.style.overflow = 'scroll'; you may also need to set the width of your html, as this will also show horizontal scrollbars

your html file will look something like this.

 <script language="javascript"> function showscroll() { document.body.style.overflow = 'scroll'; } </script> </head> <body onload="showscroll()">
0
Oct 29 '10 at 8:18
source share

Here is the method. This will not only provide the scroll container, but also show the scroll bar, even if the content is insufficient (as per your requirement). It will also work on both Iphone and Android devices.

 <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>
0
Jul 30 2018-12-21T00:
source share

Add the class to the div you want to scroll through.

overflow-x: hidden; hides the horizontal scroll bar. 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>
0
Jun 09 '17 at 8:37 on
source share


More articles:


All Articles