html中怎么设置滚动条效果,css滚动条样式怎么设置

为了做出更好的视觉效果，有时候需要用css改变浏览器或版块中滚动条的样式，那么应该怎么实现自定义滚动条样式呢？

一、设置css滚动条的7个属性说明(附参考图)。

1 ::-webkit-scrollbar 滚动条整体，可以设置宽度等

2 ::-webkit-scrollbar-button 滚动条两端的按钮

3 ::-webkit-scrollbar-track 外层轨道

4 ::-webkit-scrollbar-track-piece 内层滚动槽

5 ::-webkit-scrollbar-thumb 滚动的滑块

6 ::-webkit-scrollbar-corner 边角

7 ::-webkit-resizer 下角拖动块的样式

二、css改变浏览器滚动条样式。

只需将下面的css样式写在样式表内即可(可自行改成自己需要的样式)。

/* 设置滚动条的样式 */

::-webkit-scrollbar {

width: 12px;

}

/* 滚动槽 */

::-webkit-scrollbar-track {

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

border-radius: 10px;

}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {

border-radius: 10px;

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

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

}

::-webkit-scrollbar-thumb:window-inactive {

background: rgba(255, 0, 0, 0.4);

}

三、css设置div版块滚动条样式。

1、html代码示例

2、设置滚动条css样式示例

.test {

width : 50px;

height : 200px;

overflow: auto;

float : left;

margin : 5px;

border : none;

}

.scrollbar {

width : 30px;

height: 300px;

margin: 0 auto;

}

.test-1::-webkit-scrollbar {

/*滚动条整体样式*/

width : 10px; /*高宽分别对应横竖滚动条的尺寸*/

height: 1px;

}

.test-1::-webkit-scrollbar-thumb {

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

border-radius: 10px;

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

background : #535353;

}

.test-1::-webkit-scrollbar-track {

/*滚动条里面轨道*/

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

border-radius: 10px;

background : #ededed;

}

html中怎么设置滚动条效果,css滚动条样式怎么设置相关推荐

html如何将设置文本效果,css如何对文本进行修饰
color属性:设置文本文字颜色.用法如下: color:颜色值; color属性可以设置的合法颜色值包括:16进制颜色值(例:#ffffff),rgb颜色值[例:rgb(0,0,0)],rgba颜色 ...
html如何设置圆角效果,css怎么设置圆角边框样式？
很多时候在开发网页前端的时候,为了让网页上面的东西看起来更加的舒服,我们可能需要设置一些圆角的效果,比如圆形的头像.圆角的按钮等等. 在css样式中有一个属性:border-radius属性是就常见 ...
CSS基础样式属性设置
文章目录 css基础样式与属性设置一.宽和高二.字体属性 1. font-family:文字字体 2.font-size:字体大小 3.font-weight:文字粗细 4.font-style: ...
html中正方形列表标签属性,CSS 列表样式
我们知道在 HTML 中列表可以分为无序列表.有序列表.定义列表.在网页中经常可以看到无序列表的使用,例如像导航栏菜单.新闻列表.商品分类.图片展示等,基本都是通过无序列表来实现的. 无序列表中每个列 ...
css修饰边框为虚线,css如何设置虚线边框css虚线样式？css设置虚线边框的方法示例...
首页 >web前端>css教程>正文 css如何设置虚线边框?css设置虚线边框的方法示例原创2018-10- 在网页布局中,有时候为了整体网页的美观可能需要设置虚线边框,那么虚线 ...
如何在css中设置音乐效果,css实现简单音乐符效果
css实现简单音乐符效果利用css3中的transform.animation.keyframes实现 1 2 3 4 5 6 7 Document 8 9 .box{ 10 width:60px; ...
html 怎么设置鼠标效果,css怎么设置鼠标形状
相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,下面是学习啦小编带来的关于css怎么设置鼠标形状的内容,欢迎阅读! css怎么设置鼠标 ...
html中怎么改变鼠标形状,css鼠标样式语法及20种可选值（属性）
我们对Windows各种各样的鼠标样式都不陌生,当鼠标移动到不同的地方时,当鼠标执行不同的功能时,当系统处于不同的状态时,都会使鼠标的形状发生变化.而在网页上往往只有当鼠标在超级链接上时才出现一个手形 ...
CSS全局样式的设置
默认字体设置,边距设置 html {font-family: sans-serif; /* 默认字体 */font-size: 100%; /* 调整字体大小 */-ms-text-size-adju ...

html中怎么设置滚动条效果,css滚动条样式怎么设置

html中怎么设置滚动条效果,css滚动条样式怎么设置相关推荐

最新文章

热门文章