css滚动条样式（美化浏览器自带滚动条）-维新小众圈

css滚动条样式（美化浏览器自带滚动条）

jk • 2023-05-29 10:46:01 • 生活百科 • 阅读 345

美化浏览器自带滚动条

在前端开发中，我们常常需要自定义滚动条样式以达到更好的用户体验效果。而浏览器自带滚动条的样式相对比较单调，这时候我们就需要用到CSS来美化滚动条了。

一、宽度和高度

在CSS中，我们可以使用::-webkit-scrollbar伪元素来设置滚动条的样式。首先，我们可以通过设置width和height属性来调整滚动条的大小。例如，我们可以通过以下代码将滚动条的宽度和高度都调整为8px：

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

当然，你也可以自行设置宽度和高度的数值来满足你的需求。

二、背景色和边框

除了宽度和高度之外，我们还可以对滚动条的背景色和边框进行自定义设置。以下是一些常用的设置示例：

    
/* 滚动条的背景色为白色 */
::-webkit-scrollbar {
    background-color: #fff;
}
/* 滚动条的边框为灰色实线 */
::-webkit-scrollbar {
    border: 1px solid #ccc;
}
/* 滚动条边框圆角设置 */
::-webkit-scrollbar {
    border-radius: 5px;
}

三、滚动条轨道和滑块

除了以上基本样式设置之外，我们还可以对滚动条的轨道和滑块进行具体地样式设置。比如我们可以通过以下代码来设置滚动条轨道的背景色和滑块的背景色：

    
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: #ccc;
}

我们还可以设置滚动条滑块的尺寸大小、位置、边框以及圆角等样式。以下是一些示例代码：

    
/* 滚动条滑块宽度设置 */
::-webkit-scrollbar-thumb {
    width: 50px;
}
/* 滚动条滑块高度设置 */
::-webkit-scrollbar-thumb {
    height: 80px;
}
/* 滚动条滑块位置设置 */
::-webkit-scrollbar-thumb {
    position: relative;
    top: 20px;
}
/* 滚动条滑块边框和圆角设置 */
::-webkit-scrollbar-thumb {
    border: 2px solid #ccc;
    border-radius: 10px;
}

通过以上的样式设置，我们可以轻松地美化浏览器自带的滚动条，给用户带来更好的体验。