make a scrollbar always visible in a div - chrome

Question

I've implemented infinite scrolling for the first time, but I can't get the scrollbar to show up initially when there is no overflow. I tried this in chrome:

#scrollarea-invalid {
overflow-y: scroll !important;
height: 350px;
}

how can I make the scrollbar always show up in this div, even if the content is less than 350px in this div?

Answer 1

body {    padding: 10px;  }    ul {    max-height:150px;    overflow:scroll;  }    ::-webkit-scrollbar {    -webkit-appearance: none;    width: 10px;  }    ::-webkit-scrollbar-thumb {    border-radius: 5px;    background-color: rgba(0,0,0,.5);    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);  }

<ul>      <li>This is some content</li>      <li>This is some content</li>      <li>This is some content</li>      <li>This is some content</li>      <li>This is some content</li>      <li>This is some content</li>      <li>This is some content</li>      <li>This is some content</li>      <li>This is some content</li>      <li>This is some content</li>      <li>This is some content</li>      <li>This is some content</li>  </ul>

Answer 2

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>

Answer 3

overflow: auto or overflow: scroll won't sometimes work. So we have to try webkit based code to resolve this issue.

Try the following code to display scroll bar always shown,

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

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

this will always show the vertical and horizontal scroll bar on your page. If you need only a vertical scroll bar then put overflow-x: hidden