for inspiration - scrollbars

[cintaccs]

Description

I used

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: white;
    border-left: 1px solid whitesmoke;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: whitesmoke;
    background: gainsboro;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: dimgray;
}

to get rid of the web effect of the scroll bars. I know it is only webkit / chrome / edge .. but ...

[motss]

Does it cover the UI on other OSes like Linux and Windows? I've yet to try this.

[cintaccs]

no it is ignored on FF e.g.

and in chrome

again the coloring can be discussed - but getting rid of the 90´s browserlook is generally appreciated :-)

I see no difference in this behavior in between Mac OS Chrome/Safari and Windows Chrome (as I recall).

[motss]

I decided to add this suggestion to mimic that of Android datepicker's scrollbar.

The following CSS works for all Webkit browsers and modern Firefox:

.year-list-view__full-list {
  max-height: calc(48px * 7);
  overflow-y: auto;

  scrollbar-color: var(--app-datepicker-scrollbar-thumb-bg-color, rgba(0, 0, 0, .35)) rgba(0, 0, 0, 0);
  scrollbar-width: thin;
}
.year-list-view__full-list::-webkit-scrollbar {
  width: 8px;
  background-color: rgba(0, 0, 0, 0);
}
.year-list-view__full-list::-webkit-scrollbar-thumb {
  background-color: var(--app-datepicker-scrollbar-thumb-bg-color, rgba(0, 0, 0, .35));
  border-radius: 50px;
}
.year-list-view__full-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--app-datepicker-scrollbar-thumb-hover-bg-color, rgba(0, 0, 0, .5));
}

👍 Thanks for such suggestion!