I am trying to re-create macOS scrollbar.
* {
scrollbar-gutter: stable;
transition: background-color 1s ease-in-out;
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0);
border-radius: 8px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-button {
display: none;
}
/* Standardized Properties */
@supports not selector(::-webkit-scrollbar) {
scrollbar-color: gray transparent;
scrollbar-width: thin;
}
&[data-scrollbar-thumb="false"]::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0);
}
&[data-scrollbar-thumb="true"]::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 1);
}
}
This is the current result:
Meanwhile, this is desired result:
As you can see, in my implementation scrollbar just blinks ignoring my request to ease-in-out
.
How do I make the transition: background-color 1s ease-in-out;
work here?
You need to sign in to view this answers
Leave feedback about this