css滚动条样式

css（cascading style sheets）是前端开发中使用频率最高的技术之一，可以实现丰富的页面视觉效果。其中，自定义滚动条样式也是一种常见需求。本文将介绍如何使用css来设置滚动条的样式。

一、基本的滚动条样式

CSS提供了一些基本的滚动条样式设置，我们可以在样式表中给滚动条添加如下的属性：

/* 垂直滚动条样式 *//* 宽度 */::-webkit-scrollbar {    width: 12px;}/* 背景色 */::-webkit-scrollbar-track {    background-color: #f5f5f5;}/* 滑块颜色 */::-webkit-scrollbar-thumb {    background-color: #c1c1c1;}/* 水平滚动条样式 *//* 高度 */::-webkit-scrollbar {    height: 12px;}/* 背景色 */::-webkit-scrollbar-track {    background-color: #f5f5f5;}/* 滑块颜色 */::-webkit-scrollbar-thumb {    background-color: #c1c1c1;}

登录后复制::-webkit-scrollbar：设置滚动条的宽（或高）度。对于垂直滚动条，width属性起作用；对于水平滚动条，height属性起作用。::-webkit-scrollbar-track：设置滚动条的背景色。::-webkit-scrollbar-thumb：设置滚动条滑块的颜色。

使用上述代码，我们可以给滚动条添加一个简单的灰色样式。但这种样式可能不足够突出，无法很好地融入页面风格，下面将介绍一些更加个性化的滚动条样式设置。

二、自定义滑块和背景色

要自定义滚动条的滑块和背景色，可以使用background属性对这两个部分进行定制。例如，我们可以使用渐变效果，将滑块的颜色从一个到另一个色值进行渲染。

/* 垂直滚动条样式 *//* 宽度 */::-webkit-scrollbar {    width: 12px;}/* 背景 */::-webkit-scrollbar-track {    background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);}/* 滑块 */::-webkit-scrollbar-thumb {    background: linear-gradient(to bottom, #a1a1a1, #6b6b6b);}/* 水平滚动条样式 *//* 高度 */::-webkit-scrollbar {    height: 12px;}/* 背景 */::-webkit-scrollbar-track {    background: linear-gradient(to right, #f5f5f5, #e8e8e8);}/* 滑块 */::-webkit-scrollbar-thumb {    background: linear-gradient(to right, #a1a1a1, #6b6b6b);}

登录后复制

这里使用了CSS的线性渐变。滑块和背景色之间的渐变效果可以让滚动条的样式更为柔和。

三、隐藏滚动条

在某些特定的情况下，可能需要让滚动条隐藏。这时，我们可以使用scrollbar-width和scrollbar-height两个属性，将滚动条宽度或高度设置为0来实现。但这种方式只能在一定程度上隐藏滚动条，因为在鼠标移动的时候，滚动条依然会自动出现并随鼠标移动而改变位置。

body {    scrollbar-width: none; /* 隐藏垂直滚动条 */    -ms-overflow-style: none; /* 隐藏IE/Edge浏览器的垂直滚动条 */}/* 设置最外层容器的高度 */.scroll-container {    height: 500px;    overflow-y: scroll; /* 自动出现滚动条 */}

登录后复制