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

Question

This code is 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 every time I want it to touch on (for easier moving scroll), all scroll bars disappear

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

Any solution to keep the scrollbar in iOS or mobile phones?

Answer 1

You can customize the style of your scrollbars using css for webkit browsers or enable

  -webkit-overflow-scrolling: touch; 

Both of them do not work together in the latest safari. If you set both touches, this will work. Tested in Iphone 5 and 6