CSS fix for native scrollbars (windows)

[Dennis]

Hi @fabwa, @canesin, @localhuman

These days you can easy add a few css rules to changes the native css bars. (For a few browsers the other ones still get there native scrollbars). (Chrome, edge(chromium), Opera and Safari)

Note:
Mac already has a nice scrollbar which you don’t see so if you do want to use the css and you don’t want to effect Mac’s native scrollbar then make sure the css is only implemented for windows.

The only css you need is: (Example is for darkmode)

::-webkit-scrollbar {
  background: #232a3f;
  border-left: 1px solid #384364;
  width: 10px;
}

and

::-webkit-scrollbar-thumb {
  background: #384364;
  border-radius: 100px;
  width: 8px;
}

Results
Before:

After:

Which give a much better experience overall. Hope you can do something about it

Keep up the great work!
Dennis,

[BILLYBELT2018 (Billybelt)]

[canesin (FCC)]

Hi @Dennis tks, we have seen the community feedback about this annoyance. We already did custom scrollbars on all our table-like components, should be live next Monday.

[canesin (FCC)]

for the curious we are going with

    & .rt-table::-webkit-scrollbar,
    & .rt-tbody::-webkit-scrollbar {
      height: 10px;
      width: 10px;
      background-color: ${p => p.theme.foundation.surface};
    }

    & .rt-table::-webkit-scrollbar-track,
    & .rt-tbody::-webkit-scrollbar-track {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.1);
      border: 1px solid ${p => p.theme.colors.Greys.Grey05};
    }

    & .rt-table::-webkit-scrollbar-thumb,
    & .rt-tbody::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: linear-gradient(
        to left,
        ${p => p.theme.colors.Greys.Grey11},
        ${p => p.theme.colors.Greys.Grey05}
      );
      border: 1px solid ${p => p.theme.colors.Greys.Grey03};
    }

    & .rt-table::-webkit-scrollbar-thumb:hover,
    & .rt-tbody::-webkit-scrollbar-thumb:hover {
      background: ${p => p.theme.colors.Greys.Grey11};
    }

    & .rt-table::-webkit-scrollbar-thumb:active,
    & .rt-tbody::-webkit-scrollbar-thumb:active {
      background: linear-gradient(
        to left,
        ${p => p.theme.colors.Greys.Grey05},
        ${p => p.theme.colors.Greys.Grey11}
      );
    }

[Dennis]

Awesome thanks for sharing

[BILLYBELT2018 (Billybelt)]

I feel like I’m in the matrix … I expect to see an image and I have a line of code

[Hatertots]

Finally! The only annoyance I had with such a beautiful UX.