Scrollbar styling

[nstringham]

In this issue, I will purpose styling the scrollbars on sky.lea.moe

The Problem

the problem with unstyled scrollbars is that they are white on most browsers which clashes with the dark esthetic of the site.

notice how the scrollbars are the same contrast as the text drawing attention away from the content to the scrollbars.

My Solution

add styling to the scrollbars with ::-webkit-scrollbar and scrollbar-color

however ::-webkit-scrollbar also affects mobile which looks weird because that on mobile people expect to have the auto-hide zero-width scrollbar that comes by default.

The solution is to detect whether the scrollbar has a width in javascript when the page first loads and if it does then add the styles.

// checks if the scrollbar has a width should be true with desktop style scrollbars
if (window.innerWidth > document.documentElement.clientWidth) {
  document.documentElement.classList.add('style-scrollbar');
} else {
  document.documentElement.classList.remove('style-scrollbar');
}

.style-scrollbar *::-webkit-scrollbar-track
{
    border-radius: 12px;
    background-color: #5a595b;
}

.style-scrollbar *::-webkit-scrollbar
{
    scrollbar-color: #a6145d #5a595b;
    width: 12px;
    height: 10px;
}

.style-scrollbar body::-webkit-scrollbar
{
    background-color: #282828;
}

.style-scrollbar *::-webkit-scrollbar-thumb
{
    border-radius: 12px;
    background-color: #a6145d;
}

and here is what it looks like.

[metalcupcake5]

Could you make an issue for this on SkyCrypt? skylea has been discontinued

[nstringham]

ok I was wondering wich to do

[LeaPhant]

That layout isn't supported unless on a touch device, where scrollbars are either hidden or transparent. If they're visible the design is already broken anyway.

[nstringham]

https://github.com/SkyCryptWebsite/SkyCrypt/issues/74

[nstringham]

@LeaPhant as far as I can tell it uses CSS media max-width which doesn't have anything to do with touch