Conditional scrollbar styles

Question

I have the following CSS for my web app to style scrollbars:

  ::-webkit-scrollbar {
  height: 16px;
  z-index: 100;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 12px;
    z-index: 100;
    background-color: rgba(58,193,203, .2);

}

::-webkit-scrollbar-thumb {
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background-color: #3AC1CB;
    width: 100px;
}

and reset them with a media query when the width is less than a certain size:

    ::-webkit-scrollbar {
    height: initial;
    z-index: initial;
  }

  ::-webkit-scrollbar-track {
    -webkit-box-shadow: initial;
    border-radius: initial;
    z-index: initial;
    background-color: initial;

  }

  ::-webkit-scrollbar-thumb {
    border-radius: initial;
    -webkit-box-shadow: initial;
    background-color: initial;
    width: initial;
  }

How can we remove the scrollbar styles using ng-style, when javascript detects for example that it's on an ipad:

I know the basic syntax from here, but how can this be applied in the case of scrollbars?

Why would you want both MQs and Javascript to detect the breakpoint for tablet? — Lowkase, Mar 10 '15 at 00:50
Your question is not really constructive, but since you must know: small width indicates that it's a touch device, so scrollbars are not needed, MQ are not enough however to determine if it's a touch device, so something with a width of 1024 can be either an ipad or a computer monitor, we want to show scrollbars on computer but not on ipad, hope the logic is clear for ya. — egekhter, Mar 10 '15 at 00:55

score 0 · Accepted Answer · answered Mar 10 '15 at 01:04

Here's one possible solution. Would like to know if there's other possible answers.

    var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);

    var iPadStyle = [
        '<style>',
        '::-webkit-scrollbar {',
            'height: initial;',
            'z-index: initial;',
        '}',
        '',
        '::-webkit-scrollbar-track {',
            '-webkit-box-shadow: initial;',
            'border-radius: initial;',
            'z-index: initial;',
            'background-color: initial;',
            '',
        '}',
        '',
        '::-webkit-scrollbar-thumb {',
            'border-radius: initial;',
            '-webkit-box-shadow: initial;',
            'background-color: initial;',
            'width: initial;',
         '}',
        '</style>'
    ].join('\n');

    if (isMobile){
        angular.element("head").append(iPadStyle);
    }

Conditional scrollbar styles

1 Answers1