admin 发表于 2020-10-23 10:54:07

滚动条的美化设计参数详解

::-webkit-scrollbar {
      width: 15px;
} /* 这是针对缺省样式 (必须的) */

::-webkit-scrollbar-track {
      background-color: #b46868;
}
/* 滚动条的滑轨背景颜色 */

::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2);
}
/* 滑块颜色 */

::-webkit-scrollbar-button {
      background-color: #7c2929;
}
/* 滑轨两头的监听按钮颜色 */

::-webkit-scrollbar-corner {
      background-color: black;
}
/* 横向滚*/
.scrollbar{
      scrollbar-face-color: #b46868;
}




admin 发表于 2021-7-30 21:37:46

横滚动条：
&::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: $light;
    border-radius: 5px;
}

&::-webkit-scrollbar {
    height: 5px;
    background-color: $light;
}

&::-webkit-scrollbar-thumb {
    background-color: $gray-500;
    border-radius: 5px;
    background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, .3) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .3) 75%, transparent 75%, transparent)
}


竖滚动条：
&::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba($color: $fst, $alpha: 0.5);
    background-color: rgba($color: $fst, $alpha: 0.1);
    border-radius: 5px;
}

&::-webkit-scrollbar {
    width: 10px;
    background-color: rgba($color: $fst, $alpha: 0.1);
}

&::-webkit-scrollbar-thumb {
    background-color: $gray-500;
    border-radius: 5px;
    background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, .3) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .3) 75%, transparent 75%, transparent)
}
页: [1]
查看完整版本: 滚动条的美化设计参数详解