9

So currently, I'm using angular material and its default scroll (But I think it is perfect scrollbar) to use as a scroll design to my scroll bar. But the scroll is only showing if the users try to scroll the page/div. I tried to read the scrolling api of the Angular Material but there's no attribute that I can use in here. And I do already put the overflow-y: scroll on the css of course. Any idea? Thanks!

Rich
  • 3,928
  • 4
  • 37
  • 66

1 Answers1

14

So I found a work around, I need to include pseudo class to my CSS

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

And if you need it to a specific element or container

.selectionTable::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

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

Reference:

Making the main scrollbar always visible

Apply webkit scrollbar style to specified element

Rich
  • 3,928
  • 4
  • 37
  • 66
  • @VikasJadhav Good point. But who uses Angular 7 then target an old browser? – Rich Feb 13 '19 at 10:09
  • if you think no one is using old browsers with angular 7 then go with your approach..because many big organisations still using old ones – Vikas Jadhav Feb 13 '19 at 10:13
  • 1
    This is a non-standard feature and it won't work on some browsers, tablets and phones (https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar). There is no a stable CSS solution for this issue. The only cross-platform way to do it is to deal with it with JS. – Davor May 07 '20 at 10:29