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

Question

This code works great for styling scrollbars:

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: #000;
}
.frame::-webkit-scrollbar:horizontal {
    height: 6px;
}
.frame::-webkit-scrollbar-thumb {
    background-color: #000;
}
.frame::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #333;
}

But everytime i want to make it touch enabled (for easing in the mobile scrolling), all scrollbars disappear

.frame {
    -webkit-overflow-scrolling: touch;
}

Any solution to keep the scrollbar in iOS or mobiles?

Here's the bug report. Comment to let Apple know it's important to you. — aleclarson
– aleclarson, Commented Jun 5, 2017 at 18:05

sounakpal · Accepted Answer · 2016-01-14 11:20:22Z

4

You can either custom style your scrollbars with css for webkit browsers or enable

    -webkit-overflow-scrolling: touch;

Both of them doesnt work together in latest safaris. If you put both only touch will work. Tested in Iphone 5 and 6

answered Jan 14, 2016 at 11:20

sounakpal

1065 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related