How to make the scrollbar transition gradually?

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

Related Post