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!

Interesting thing is 2 of 10 times, the scrollbar disappears and it works as intended. Quite odd. — skywlkr
– skywlkr, Commented Jul 15, 2015 at 20:29
Check out this answer 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
– Anthony Hilyard, Commented Jul 22, 2015 at 16:36
Wouldn't you have big issues with this about crossbrowsing (FF, Opera)? — Alexis B.
– Alexis B., Commented Jul 23, 2015 at 8:49

Community · Accepted Answer · 2017-05-23 12:06:08Z

3

+50

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'

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Jul 23, 2015 at 9:15

Alexis B.

1,1078 silver badges14 bronze badges

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

1 Comment

Alexis B. Over a year ago

@skywlkr Have you fixed your issue with this? May I ask for the bounty, Mr Jango Fett? ☞  ͜ʖ  ☞

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related