10

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?

peterdotjs
  • 1,526
  • 1
  • 13
  • 19
Miguel Peniche
  • 981
  • 10
  • 20
  • 2
    http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/ – Frane Poljak Mar 18 '15 at 13:37
  • 2
    [Here's the bug report.](https://bugs.webkit.org/show_bug.cgi?id=137043) Comment to let Apple know it's important to you. – aleclarson Jun 05 '17 at 18:05

1 Answers1

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

sounakpal
  • 106
  • 5