如何用CSS修改浏览器滚动条的样式（实例详解）

小灰灰 2021-01-29 18:15 647阅读 0赞

随着互联网的发展，人们对页面的要求越来越高，不只是功能好用，而且还要颜值高。前端开发人员对于浏览器的滚动条并不陌生，当自带的一些滚动条无法满足我们的审美时，你知道**如何用CSS修改浏览器滚动条的样式**吗？今天就给大家介绍**如何设置div滚动条样式**。有需要的小伙伴可以参考一下。

我们在**自定义滚动条样式**前，首先要了解滚动条的结构。通俗来讲，滚动条由两部分组成：一部分是可以滑动的部分，我们称它为滑块；另一部分是滚动条的轨道，也就是滑块的轨道，一般来说，为了美观，滑块的颜色要比轨道的颜色深一些。

### 首先介绍滚动条相关的CSS代码，以及他们的含义 ###

::-webkit-scrollbar：指滚动条整体部分，它的属性有width,height,background等

::-webkit-scrollbar-button ： 指滚动条两边的按钮。当不需要时可以用display:none将其隐藏

::-webkit-scrollbar-track ：指外层轨道部分，当不需要时可以用display:none将其隐藏，也可以添加你想要的颜色

::-webkit-scrollbar-track-piece ：指内层轨道部分，即滚动条中间的部分

::-webkit-scrollbar-thumb ： 指滚动条里面可以拖动的部分，也就是滑块

::-webkit-scrollbar-corner ：指边角部分

::-webkit-resizer ：他用来定义右下角滑块的样式

但是最常用的是滚动条整体部分（-webkit-scrollbar），滑块（-webkit-scrollbar-thumb）以及外轨道（ -webkit-scrollbar-track）三部分。

接下来我们将div盒子里面超出的部分隐藏，给div设置滚动条样式，看看怎么用CSS实现滚动条样式。

### HTML部分： ###
````
<divclass="scroll">

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

have a nice day <br/>

</div>
````
### CSS部分： ###
````
.scroll{

margin:100pxauto;

border: 1pxsolid#000;

width: 200px;

height: 300px;

overflow: auto;

}

.scroll::-webkit-scrollbar {

width: 10px;

height: 10px;

}

/*正常情况下滑块的样式*/

.scroll::-webkit-scrollbar-thumb {

background-color: rgba(0,0,0,.05);

border-radius: 10px;

-webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);

}

/*鼠标悬浮在该类指向的控件上时滑块的样式*/

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

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

border-radius: 10px;

-webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);

}

/*鼠标悬浮在滑块上时滑块的样式*/

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

background-color: rgba(0,0,0,.4);

-webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);

}

/*正常时候的主干部分*/

.scroll::-webkit-scrollbar-track {

border-radius: 10px;

-webkit-box-shadow: inset006pxrgba(0,0,0,0);

background-color: white;

}

/*鼠标悬浮在滚动条上的主干部分*/

.scroll::-webkit-scrollbar-track:hover {

-webkit-box-shadow: inset006pxrgba(0,0,0,.4);

background-color: rgba(0,0,0,.01);

}
````
### 效果图： ###

![format_png][]

**注意**：如果是水平滚动条，那么width属性不起作用，height可以设置滚动条的高度；如果是竖直滚动条，那么height高度不起作用，width可以用来设置滚动条的宽度。在工作中可以根据需要设置想要的样式，没有接触过得小伙伴可以多去尝试，加深对知识点的理解，希望可以帮助到你！

以上就是如何用CSS修改浏览器滚动条的样式（实例详解）的详细内容，更多请关注我！！！

[format_png]: /images/1611944089467.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，647人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS样式怎样修改滚动条的样式

以下是一些常见的滚动条样式的CSS代码示例： / 设置滚动条的宽度、高度、背景色和边框样式 / ::-webkit-scrollbar { wid

柔情只为你懂/ 2024年03月26日 19:09/ 0 赞/ 51 阅读

相关 css 修改浏览器滚动条样式

本文是基于谷歌浏览器将原有的滚动条样式进行修改，修改结果如下所示。 ![在这里插入图片描述][20200107161430244.png] 代码如下： <sty

Love The Way You Lie/ 2023年06月28日 04:59/ 0 赞/ 16 阅读

相关 css修改谷歌浏览器和火狐浏览器的滚动条样式

css代码谷歌浏览器滚动条样式： ::-webkit-scrollbar { background: f7f7f9; width: .08

一时失言乱红尘/ 2023年02月18日 14:24/ 0 赞/ 327 阅读

相关 css修改滚动条样式

HTML代码： <div class="element"> 内容 </div> CSS代码： .element{ over

今天药忘吃喽~/ 2023年01月01日 01:41/ 0 赞/ 201 阅读

相关 vue修改浏览器的滚动条样式

在vue页面加上以下css： ::-webkit-scrollbar { width: 10px; } ::-webkit-

深碍√TFBOYSˉ_/ 2022年12月03日 01:34/ 0 赞/ 248 阅读

相关 css修改滚动条的样式

滚动条默认样式 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

我就是我/ 2022年10月09日 03:11/ 0 赞/ 210 阅读

相关如何修改自定义浏览器滚动条样式

1、::-webkit-scrollbar 定义了滚动条整体的样式； 2、::-webkit-scrollbar-thumb 滑块部分； 3、::-webkit-sc

水深无声/ 2022年02月15日 08:19/ 0 赞/ 311 阅读

相关 css如何修改滚动条样式

默认滚动条样式如下： ![70][] 那如何修改呢？如下代码： <div class="inner"> <div class="innerbox

朱雀/ 2021年12月13日 05:02/ 0 赞/ 419 阅读

相关如何用CSS修改浏览器滚动条的样式（实例详解）

随着互联网的发展，人们对页面的要求越来越高，不只是功能好用，而且还要颜值高。前端开发人员对于浏览器的滚动条并不陌生，当自带的一些滚动条无法满足我们的审美时，你知道如何用C...

小灰灰/ 2021年01月29日 18:15/ 0 赞/ 648 阅读

相关如何利用css改变浏览器滚动条样式

注意：该方法只适用于 -webkit- 内核浏览器滚动条外观由两部分组成： 1、滚动条整体滑轨 2、滚动条滑轨内滑块在CSS中滚动条由3部分组成

朱雀/ 2020年04月28日 06:05/ 0 赞/ 1007 阅读