在我们日常的web开发中，经常会遇到滚动条的需求：为了优化页面交互，控制滚动，等等。然而，浏览器自带的滚动条往往并不美观。所以，本文将带您一起了解如何自定义完美的CSS滚动条样式，打造不一样的滚动条效果。

1、样式概述

首先，我们需要知道滚动条的结构和组成部分。分为scrollbar、scroll-track、scroll-thumb和scroll-button。其中，scrollbar指整个滚动条框；scroll-track是内容载体，滚动条通过滑块在滑动轨迹上滚动实现上下移动；scroll-thumb是滑块，它代表着当前的位置；scroll-button是滚动的按钮，一般提供向上和向下滚动的功能。

2、常用的CSS属性

在自定义滚动条样式的过程中，我们可以使用一些CSS属性。下面，让我们来看看一些常用的CSS属性。

2.1、-webkit-scrollbar

-webkit-scrollbar是一个CSS属性，它定义了webkit浏览器的滚动条的样式。

2.2、-webkit-scrollbar-track

-webkit-scrollbar-track是一个CSS属性，它定义了webkit浏览器的滚动条轨道的样式。

2.3、-webkit-scrollbar-thumb

-webkit-scrollbar-thumb是一个CSS属性，它定义了webkit浏览器的滚动条滑块的样式。

2.4、-webkit-scrollbar-button

-webkit-scrollbar-button是一个CSS属性，它定义了webkit浏览器的滚动条按钮的样式。

3、实例解析

下面，我们开始讲解如何自定义完美的CSS滚动条样式。

实例一：

实现效果如下：

=

代码如下：

.scrollbar{

width: 200px;

height: 300px;

margin: 10px auto;

overflow-y: hidden;

}

.scrollbar::-webkit-scrollbar {

width: 8px;

height: 8px;

}

.scrollbar::-webkit-scrollbar-track {

border-radius: 10px;

background-color: #c8c8c8;

}

.scrollbar::-webkit-scrollbar-thumb {

border-radius: 10px;

background-color: rgba(0,0,0,.2)

}

注解：

通过.icon::-webkit-scrollbar设置滚动条的样式。

通过.icon::-webkit-scrollbar-track设置轨道的样式。

通过.icon::-webkit-scrollbar-thumb设置滑块的样式。

实例二：

实现效果如下：

=

代码如下：

.scrollbar{

width: 200px;

height: 300px;

margin: 10px auto;

overflow-y: scroll;

}

.scrollbar::-webkit-scrollbar {

width: 10px;

height: 10px;

}

.scrollbar::-webkit-scrollbar-track {

border-radius: 10px;

background-color: #c8c8c8;

}

.scrollbar::-webkit-scrollbar-thumb {

border-radius: 10px;

background-color: #3e3e3e

}

注解：

通过 .scrollbar::-webkit-scrollbar 设置滚动条，定义了宽度和高度。

通过 .scrollbar::-webkit-scrollbar-track 定义了滚动条轨道的背景颜色和边框的圆角。

通过 .scrollbar::-webkit-scrollbar-thumb 定义了滑块的背景颜色和边框的圆角。

实例三：

实现效果如下：

=

代码如下：

.scrollbar{

width: 200px;

height: 300px;

margin: 10px auto;

overflow-y: scroll;

}

.scrollbar::-webkit-scrollbar {

width: 8px;

height: 8px;

}

.scrollbar::-webkit-scrollbar-track {

background-color: #e0e0e0;

border-radius: 10px;

box-shadow: none;

}

.scrollbar::-webkit-scrollbar-thumb {

background-color: #444444;

border-radius: 10px;

box-shadow: none;

outline: none;

}

.scrollbar::-webkit-scrollbar-thumb:hover{

transition: 500ms;

background-color: #333333;

box-shadow: none;

}

注解：

通过 .scrollbar::-webkit-scrollbar 定义了滚动条。分别定义了宽度和高度。

通过 .scrollbar::-webkit-scrollbar-track 定义了滚动条轨道的背景颜色和边框的圆角以及去除了滚动条轨道自带的阴影。

通过 .scrollbar::-webkit-scrollbar-thumb 定义了滑块的背景颜色和边框的圆角，去除了滑块自带的阴影。同时也去除了点击时的蓝色边框。通过.hover，定义了鼠标经过样式。

4、总结

本文分享了如何使用CSS属性来实现各种自定义滚动条的效果。在实现滚动条前，需要先了解滚动条的组成和结构，才能在样式设置时更好的定位要修改的部分和属性。同时，根据需求和网站设计，选择不同样式的滚动条，可以很好的提升网站的美观性和易用性。