How to always show the vertical scrollbar in a browser

Question

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

User · Answer

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>

User · Answer

set the overflow property of a containing div to scroll

User · Answer

Just use CSS   body     overflow-y  scroll

User · Answer

I have been doing it this way   element       overflow-y  visible     Painfully simple I know

User · Answer

jQuery shouldn t be required  You could try adding the CSS   body     overflow-y scroll     This works across the latest browsers  even IE6

User · Answer

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     lt style gt       scrollholder           position  relative          width  310px  height  350px          overflow  auto          z-index  1         lt  style gt    lt script gt      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                    lt  script gt    lt body onload  touchScroll  scrollMe    gt        lt  -- title -- gt       lt  --  lt div class  title  onselectstart  return false  gt Alarms lt  div gt  -- gt       lt div class  scrollholder  id  scrollMe  gt    lt  div gt   lt  body gt

User · Answer

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

User · Answer

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

User · Answer

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   lt script language  javascript  gt      function showscroll             document body style overflow    scroll          lt  script gt   lt  head gt   lt body onload  showscroll    gt

User · Answer

x000D   x000D     Nothing to show here x000D  body   x000D    height  150vh  x000D    x000D   x000D    -webkit-scrollbar   x000D    width  15px  x000D    x000D   x000D    -webkit-scrollbar-thumb   x000D    background  rgba 0  0  0   6   x000D    x000D   x000D     Of course you can style it even more    x000D   lt h1 style  margin  0 position  absolute top  50  left  50  transform  translate -50   -50   font-family  Helvetica  Arial  sans-serif   gt Scroll lt  h1 gt  x000D   x000D   x000D

[html] How to always show the vertical scrollbar in a browser?

Examples related to html

Examples related to css

Examples related to browser