Hey guys! I'm having a problem reproducing select with custom styled scrollbar in our design. It looks like this:
The scrollbar is very simple and can be implemented with -webkit-scrollbar:
&::-webkit-scrollbar {
width: 16px; /* Total width including `border-width` of scrollbar thumb */
height: 0;
}
&::-webkit-scrollbar-thumb {
height: 1em;
border: 6px solid rgba(0, 0, 0, 0); /* Transparent border together with `background-clip: padding-box` does the trick */
background-clip: padding-box;
-webkit-border-radius: 1em;
background-color: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.025);
}
&::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
&::-webkit-scrollbar-corner {
background-color: transparent;
}
And here's the result:
But on the screen you can see that the scrollbar has top and bottom space, sort of margin or padding.
I've been banging my head around this issue for a long time, I just can't add that margin for scrollbar. There are some workarounds but the scrollbar should have border-radius, it should be rounded. Because of this most of the workarounds doesn't work.
If someone can give me an idea how to implement it, I would be happy.
The issue is resolved by adding a scrollbar to ul.multiselect__content and adding overflow: hidden to .multiselect__content-wrapper. This way we can control the top and bottom margin for scrollbar.
Hey guys! I'm having a problem reproducing select with custom styled scrollbar in our design. It looks like this:
The scrollbar is very simple and can be implemented with
-webkit-scrollbar
:And here's the result:![Снимок экрана 2022-12-25 в 12 17 46](https://user-images.githubusercontent.com/7077307/209457736-556eb24a-22f8-4a2d-80fa-153bd0fd9c39.png)
But on the screen you can see that the scrollbar has top and bottom space, sort of margin or padding.
I've been banging my head around this issue for a long time, I just can't add that margin for scrollbar. There are some workarounds but the scrollbar should have border-radius, it should be rounded. Because of this most of the workarounds doesn't work.
If someone can give me an idea how to implement it, I would be happy.
Thanks! :heart: