11

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!

skywlkr
  • 1,185
  • 11
  • 22
  • Interesting thing is 2 of 10 times, the scrollbar disappears and it works as intended. Quite odd. – skywlkr Jul 15 '15 at 20:29
  • Check out [this answer](http://stackoverflow.com/a/16671476/5090789) to a similar question. It seems that setting `-webkit-overflow-scrolling` to `touch` will enable iOS native scrollbars, ignoring other CSS rules. You can get around that by nesting your scrolling area div with a slightly smaller, `overflow: hidden` div, effectively cutting off the scrollbars where needed. – Anthony Hilyard Jul 22 '15 at 16:36
  • Wouldn't you have big issues with this about crossbrowsing (FF, Opera)? – Alexis B. Jul 23 '15 at 08:49

1 Answers1

3

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'

Community
  • 1
  • 1
Alexis B.
  • 1,105
  • 8
  • 13
  • @skywlkr Have you fixed your issue with this? May I ask for the bounty, Mr Jango Fett? ☞  ͜ʖ  ☞ – Alexis B. Jul 28 '15 at 08:32