Adding Permanent Scrollbars with CSS

Sometimes, you need a permanent scrollbar. No matter how well you think having information continue beyond the page break will clue to my mother that she should keep scrolling down, it’s not going to work. She (and other users just like her) need a little more visual cue that they can continue moving down a page. I mean, let’s think about it, digital interfaces are not natural to some people, and as the web hits total modernism - cutting away any possible dead weight of visual excess - there’s a few babies I feel are getting thrown out with the bathwater.

That being said, this solution will use ::-webkit CSS, and so will only work for Chrome. If you’d like to get this working for other browsers, you’ll need to use JQuery. Here’s the CSS, just attach it to a div of class="scrollable":

.scrollable{
  height: 110px;
  overflow-y: scroll;
}
.scrollable::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
.scrollable::-webkit-scrollbar-track {
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0 0 0 7px;
}
.scrollable::-webkit-scrollbar-corner {
  background: transparent;
}
.scrollable::-webkit-scrollbar {
  height: 16px;
  overflow: visible;
  width: 16px;
}
.scrollable::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.2);
  background-clip: padding-box;
  border: solid transparent;
  border-radius: 2px;
  border-width: 3px;
  min-height: 28px;
  padding: 100px 0 0;
}

You can play around with the styling of the bar to make it more or less subtle, depending on the aesthetic you’re going for. Just remember to do user testing around these kinds of elements to ensure your audience knows the content overflows.