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

Question

So currently I have:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

However I don't believe that it will be obvious to some users that there is more content there. They could scroll down the page without knowing that my div actually contains a lot more content. I use the height 510px so that it cuts off some text so on some pages it does look like that there is more content, but this doesn't work for all of them.

I am using a Mac, and in Chrome and Safari the vertical scroll bar will only show when the mouse is over the Div and you actively scroll. Is there a way to always have it displaying?

Answer 1

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>

customize the apperance as needed. Source