条件滚动条样式

Conditional scrollbar styles

本文关键字：样式 滚动条 条件      更新时间：2023-09-26

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

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

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

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

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

    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);
    }
相关文章：