I found an example on css-tricks.com that demonstrates a convenient mixin for custom scrollbars:
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
// For Google Chrome
&::-webkit-scrollbar {
width: $size;
height: $size;
}
&::-webkit-scrollbar-thumb {
background: $foreground-color;
}
&::-webkit-scrollbar-track {
background: $background-color;
}
// For Internet Explorer
& {
scrollbar-face-color: $foreground-color;
scrollbar-track-color: $background-color;
}
}
The article explains how to use this mixin in Sass:
body {
@include scrollbars(10px, pink, red);
}
.custom-area {
@include scrollbars(.5em, slategray);
}
In my project, I applied the mixin to a .textarea:
.scrollable {
@include scrollbars(.3em, #bbb, #245662);
}
.textarea {
border: 5px solid #73B3C9;
background: #245662;
padding: 15px;
@extend .scrollable;
}
While it works well with textareas, I tried adding the .scrollable class to a <div/>:
this.startGameTextArea.innerHTML = `
<div class="scrollable" style="display: flex; flex-direction: column; gap: 5px; overflow-x: scroll; width: 600px">
...
`;
Unfortunately, the scrollbar customization does not apply to this div. Any ideas why?