[Question] Select with custom scrollbar + top/bottom margin

[bogdan0083]

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.

Thanks! :heart:

[bogdan0083]

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.