Scroll Bars are not showing in mobile deivces until it's scrolled,

Here I have added a table with max height if it exceeds the height then custom scroller shows.The issues is it's not showing on mobile devices until its scrolled.

enter image description here

.scan-by-blocks .scan-by-block .legend {
  max-height: 120px;
  overflow-y: auto;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar {
  width: 8px;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-thumb {
  background-color: var(--grey-dark);
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px var(--grey-dark);
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

I want to keep them on mobile devices even it's not scrolled.

I'm not quite sure yet, but can you try to change your overflow-y: auto into overflow-y: scroll?

.scan-by-blocks .scan-by-block .legend {
 max-height: 120px;
 overflow-y: auto;
 touch-action: pan-y;
 -ms-touch-action: pan-y;
 -webkit-overflow-scrolling: touch;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar {
 width: 8px;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-thumb {
 background-color: var(--grey-dark);
 border-radius: 5px;
 -webkit-box-shadow: inset 0 0 6px var(--grey-dark);
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-track {
 background-color: rgba(0, 0, 0, 0.1);
 border-radius: 5px;
}

Change youroverflow-y: auto; to overflow-y: scroll; in .scan-by-blocks .scan-by-block .legend. If the issue persists, comment out all your custom scrollbar styles below and then retry it.