Scrollbar Not Showing in Chrome With Overflow-y: scroll

Question

I'm using Chrome version 84.0.4147.89, and have a div that uses

overflow-y:scroll;

The scrolling functionality works, however no scroll bar shows. It does show in IE. I'm required to get it show as users with no mouse or touchscreen find it very difficult to scroll without the bar visible.

I have tried

overflow-y:scroll!important;

but that did not work either.

I have also tried disabling 'Use hardware acceleration when available' as I saw it recommended in another thread, but that also did not work.

How do I make the scroll bar appear for Chrome?

Thanks.

Answer 1

I think you have to declare a height. Here's an example of what I'm using.

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;
}