Css - Overflow: Scroll; - Always Show Vertical Scroll Bar

CSS - Overflow: Scroll; - Always show vertical scroll bar?

Just ran into this problem myself. OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.

The fix: In your css include -

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

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

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

/* css for demo */
#container {  height: 4em;  /* shorter than the child */  overflow-y: scroll;  /* clip height to 4em and scroll to show the rest */}
#child {  height: 12em;  /* taller than the parent to force scrolling */}

/* === ignore stuff below, it's just to help with the visual. === */
#container {  background-color: #ffc;}
#child {  margin: 30px;  background-color: #eee;  text-align: center;}

<div id="container">  <div id="child">Example</div></div>

Force show vertical scroll bar on table

Some version of OSX hide scrollbars when not needed.
They probably hope to make the webpage slicker.
Try including this in your CSS file:

::-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);
}

JSFiddle

Source

make a scrollbar always visible in a div - chrome

Just having the scrollbar visible will not allow you to react to the user trying to scroll down. So you will need to actually make the content flow outside of the area and detect the scroll.

Try this:

#scrollarea-invalid {
overflow-y: scroll;
height: 350px;
}
#scrollarea-content{
  min-height:101%;
}

<div id='scrollarea-invalid'>
  <div id='scrollarea-content'></div>
</div>

overflow-y scroll always show even it not overflow

Try using overflow: auto instead. That will only show scrollbars when the content overflows the normal height, whereas overflow: scroll will show them all the time.

Why is the vertical scrollbar always visible

just change overflow-y:scroll to overflow-y:auto;

Css - Overflow: Scroll; - Always Show Vertical Scroll Bar