Question

我的Web应用程序有以下CSS来设置滚动条的样式：

  ::-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;
}

并在宽度小于特定大小时使用媒体查询重置它们：

    ::-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;
  }

当javascript检测到例如它在ipad上时，我们如何使用ng-style删除滚动条样式：

我知道here的基本语法，但是如何在滚动条的情况下应用它？

Answer 1

这是一个可能的解决方案。想知道是否有其他可能的答案。

    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);
    }

条件滚动条样式

1 个答案: