visible scrollbars IOS with "webkit-overflow-scrolling: touch"

Question

I want scrollbars to be always visible in IOS. The quick solution is the "::-webkit-scrollbar" fix. However when using "webkit-overflow-scrolling: touch" for the "slide feeling", the scrollbars are not visible anymore.

How can I get them both working?

See the example http://jsfiddle.net/gatb4ct6/5/:

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 13em;
    width: 10em;
    line-height: 1em;
    /*-webkit-overflow-scrolling: touch;*/
    /* uncomment above and scrollbars are not visible on IOS */
}

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 11px;
}

::-webkit-scrollbar:horizontal {
    height: 11px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

Have you found a solution for this? I still can't find a workaround — lithiumlab

Denis Mitiliuc Denis Mitiliuc · Accepted Answer · 2018-08-17T15:33:29

I was searching for the same problem. It appears that you can use just one of the two options. Scroll auto but with styled scrollbar or fluid scroll but with invisible and not styled scrollbar.

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 13em;
    width: 10em;
    line-height: 1em;
    -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 11px;
}

::-webkit-scrollbar:horizontal {
    height: 11px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

Or use the -webkit-overflow-scrolling: touch; and none of the pseudo classes after.

visible scrollbars IOS with "webkit-overflow-scrolling: touch"

1 Answers