Struggling with the styling of the scrollbar without affecting the resizer. Successfully styled the scrollbar but facing an issue where the resizer changes size and gains an unintended border. The resizer looks fine when there's no scrollbar present. Images for reference: Codepen link.
https://i.sstatic.net/6RHJY.png https://i.sstatic.net/Uv6Cj.png
The code in my.scss file is as follows:
@mixin scrollbar-styles {
&::-webkit-scrollbar {
background-color: transparent;
border: none;
width: 12px;
}
&::-webkit-scrollbar-button {
display: none;
}
&:hover {
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 99px;
background-clip: content-box;
border: 3px solid transparent;
}
&.on-dark {
&::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.3);
}
}
}
}
Seeking assistance on fixing this issue. Attempts with ::-webkit-resizer have failed and it's not recommended by MDN. Visit link for more details.
Appreciate any help. Thank you!