iOS: any way to make -webkit-overflow-scrolling and ::-webkit-scrollbar work together?

Question

I'm trying to apply custom styles to the scrollbars (actually, trying to make scrollbars always visible) and preserve the momentum scrolling for the iOS app:

#container {
    height: 400px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

#container::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: #000;
}

#container::-webkit-scrollbar:horizontal {
    height: 6px;
}

#container::-webkit-scrollbar-thumb {
    background-color: #000;
}

#container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #333;
}

But -webkit-overflow-scrolling: touch and ::-webkit-scrollbar styles don't work together. There's already a related question on StackOverflow:

-webkit-overflow-scrolling: touch breaks my -webkit-scrollbar css in iOS

So, from the height of spring'2016, is there any way to have a momentum scrolling while styling the scrollbars at the same time? I'm ready to ditch the -WebKit-overflow-scrolling: touch if there's another method that can fake it.

Please don't suggest using niceScroll, iScroll, etc. - I've tried these; actually, I'm currently using one of such scripts and want to get away from it.

Here's the bug report. Comment to let Apple know it's important to you. — aleclarson
Possible duplicate of -webkit-overflow-scrolling: touch breaks my -webkit-scrollbar css in iOS — Afrophysics

Afrophysics Afrophysics · Accepted Answer · 2019-10-08T21:17:16

As it was mentioned in the thread linked above, -webkit-overflow-scrolling: touch is not compatible with your -webkit-scrollbar properties. If you don't want to download a 3rd party scroller, you will have to write some custom JS to get the functionality you're looking for.

iOS: any way to make -webkit-overflow-scrolling and ::-webkit-scrollbar work together?

1 Answers