更改网页内滚动条效果

Posted 2021-03-02 mirage-mc

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

::-webkit-scrollbar {
    width: 9px;
    height: 9px
}


/*定义滚动条轨道*/

::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}


/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {
    background-color: #0093ff;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

本站点应用的滚动条样式即为上述描写，将上述css代码块复制到对应站点里应用即可。