Make a Scrollbar Always Visible in a Div - Chrome

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

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

Making the main scrollbar always visible - without scroll

The behavior works as expected on Windows machines, but it appears MacOS and iOS have their own handling of scrollbars. You can see this issue addressed in this question.

Some of the options listed within the answer are to style the scrollbar manually like so:

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 

You can also use javascript to manually scroll the scrollbar on page load, just a single pixel. Like this:

$('#scrollable-section').scrollTop(1).scrollTop(0);

Making the main scrollbar always visible

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

This makes the scrollbar always visible and only active when needed.

Update: If the above does not work then just using this may.

html {
    overflow-y:scroll;
}

Overflow-x scrollbars aren't visible on Chrome until I select and drag on content?

Here's one option for you:
https://codepen.io/panchroma/pen/wvdrzMe

It should work well on OS X Chrome and Safari and it's easy enough to style the slider the way you want.

::-webkit-scrollbar {
        width: 8px;
        background-color:#aaa;
    }

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

How to always show the vertical scrollbar in a browser?

jQuery shouldn't be required. You could try adding the CSS:

body    {overflow-y:scroll;}

This works across the latest browsers, even IE6.

Make scrollbars only visible when a Div is hovered over?

div {  height: 100px;  width: 50%;  margin: 0 auto;  overflow: hidden;}
div:hover {  overflow-y: scroll;}

<div>  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop    publishing software like Aldus PageMaker including versions of Lorem Ipsum.  </p></div>

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

div {
    width: 30vw;
    height: 49.75vw;
    min-height: 1em;
    overflow-y: visible;
    overflow-x: hidden;
    direction: ltr;
    /*position of scroll bar can use rtl if wanted, but use div * {direction: ltr;} if you do.} */
    scrollbar-width: thin;/*fancy width*/
    scrollbar-color: #f3f0dd #154734;/*fancy colors for Firefox*/
}

div::-webkit-scrollbar {
  width: 11px;
}

div::-webkit-scrollbar-track {
  background: #154734;
}

div::-webkit-scrollbar-thumb {
  background-color: #f3f0dd;
  border-radius: 6px;
  border: 3px solid #154734;
}