原创

调整页面滚动条CSS样式


最近发现博客滚动条特别不明显,简直考验眼力,于是尝试调整一下样式,记录如下:

/* 滚动条  start */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    border-radius: 4px;
    background-color: #F5F5F5;
    width: 7px; 
    height: 7px;
}

/* 滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: #F5F5F5;  //轨道颜色
}


/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #555; //滑块颜色
}

/* 滚动条 end */

通过修改样式里的轨道颜色和滑块颜色,就能快速实现你想要的效果了。

正文到此结束