Setting overflow-scrolling to touch on iPad overrides all custom css set for webkit-scrollbar, is there any fix for this?

Question

If I set the following css for a div:

-webkit-overflow-scrolling: touch;

the custom css I use for hiding the scrollbar gets overridden and the default scrollbar appears on iPad.

This is the css I use to hide the scrollbar:

  ::-webkit-scrollbar {
    width: 12px;
    opacity:0;
  }
  ::-webkit-scrollbar-track {
      opacity:0;
  }
  ::-webkit-scrollbar-thumb {
      opacity:0;
  }

If you know any solution to override the default scrollbar when the overflow-scrolling is set to touch, I would be grateful for your help.

Thanks!

Answer 1

You should have a look on some jQuery custom content scroller plugins and especially with the options like contentTouchScroll: integer which might help you to detect the touch screens and then play with this.

OR

Otherwise, and probably a better solution, you should (like suggested here) use Modernizr.

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
}

Why not using both of them with

if (Modernizr.touch){
   $(".content").mCustomScrollbar({
       contentTouchScroll: false
   });
}

Good Luck'