html中美化右侧滑动条,美化css滚动条样式，就这么简单

很多朋友，会觉得默认的css滚动条样式是很丑的吧，稍微改下-webkit-scrollbar(滚动条整体样式)、-webkit-scrollbar-thumb(滚动条里面小方块样式)、-webkit-scrollbar-track(滚动条里面轨道样式)就ok了，要改什么样的就改什么样的css滚动条。

改默认css滚动条样式，例子代码如下：html>

css滚动条样式

.box{

width: 600px;

height: 400px;

margin: 100px auto;

border: 1px solid #000;

border-right: 0;

}

.main{

overflow-x: hidden;

overflow-y: auto;

color: #000;

font-size: 16px;

height: 100%;

}

.main p{height:300px;}

/*-------滚动条整体样式----*/

.main::-webkit-scrollbar {

width:8px;

height:8px;

}

/*滚动条里面小方块样式*/

.main::-webkit-scrollbar-thumb {

border-radius:100px;

-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);

background:red;

}

/*滚动条里面轨道样式*/

.main::-webkit-scrollbar-track {

-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);

border-radius:0;

background:rgba(0,0,0,0.1);

}

内容1

内容2

内容3

效果图：

特别注意：实现单个div里面的内容滚动，必需满足以下3个条件：

1、div必须设定固定的高度，不能使用百分比或 auto 等弹性值；

2、其中的内容高度必须超过它本身的高度；

3、必需要添加这个overflow:auto属性。

附：overflow的属性和不同值得作用

1.overflow:visible;不剪切内容也不添加滚动条。默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示;

2.overflow:auto;在需要时剪切内容并添加滚动条;

3.overflow:hidden;不显示超过对象高度的内容;

4.overflow:scroll;总是显示纵向滚动条;

5.overflow 水平及垂直方向内容溢出时的设置;

6.overflow-x 水平方向内容溢出时的设置;

7.overflow-y 垂直方向内容溢出时的设置。

爆款服务器

除注明外的文章,均为来源:老汤博客,转载请保留本文地址！