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: 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


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>

Tags:

Css

Recent Posts