HTML div 滚动条样式设计

::-webkit-scrollbar-track-piece{
background-color:#fff;/*滚动条的背景颜色*/
-webkit-border-radius:0;/*滚动条的圆角宽度*/
}
::-webkit-scrollbar{
width:8px;/*滚动条的宽度*/
height:8px;/*滚动条的高度*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直滚动条的样式*/
height:50px;
background-color:#999;
-webkit-border-radius:4px;
outline:2px solid #fff;
outline-offset:-2px;
border:2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{/*滚动条的hover样式*/
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*水平滚动条的样式*/
width:5px;
background-color:#CCCCCC;
-webkit-border-radius:6px;
}

　　div::-webkit-scrollbar{

　　　　width:8px;/*滚动条的宽度*/

　　}

通过该种方式设计div的滚动条样式。

转载于:https://www.cnblogs.com/super86/p/4304782.html

HTML div 滚动条样式设计相关推荐

html div 隐藏滚动条样式,div滚动条样式隐藏与显示
DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢? 要设置CSS滚动条样式,需要用到overflow-y和overflo ...
div滚动条样式css3,CSS3自定义滚动条样式的示例详解
在前面一篇文章中,我们给大家介绍了CSS设置div滚动条样式,我们都知道当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. ...
网页div滚动条样式设置
网页div滚动条样式设置 ::-webkit-scrollbar-track-piece{ background-color:#fff;/*滚动条的背景颜色*/ -webkit-border-radi ...
修改DIV滚动条样式设置滚动条之前先把div设置一定的高
1.修改DIV滚动条样式设置滚动条之前先把div设置一定的高 // 1./*滚动条样式*/ div::-webkit-scrollbar { /*滚动条整体样式*/width: 5px; /*高 ...
修改DIV滚动条样式
/*滚动条样式*/ div::-webkit-scrollbar { /*滚动条整体样式*/width: 5px; /*高宽分别对应横竖滚动条的尺寸*/height: 5px; }div::-webk ...
CSS设置div滚动条样式的示例
.scroll{ width:100px; height:200px; overflow:auto;/自动出现滚动条,如果要出现竖直滚动条则改成:overflow-y:auto,如果横向出现滚动条则改 ...
设置div滚动条样式
::-webkit-scrollbar{width:14px;}/*滚动条宽度设置:宽度为0 ,当有滚动条出现的时候则不显示滚动条*/ ::-webkit-scrollbar-track{backgr ...
css 新增div滚动条、修改滚动条样式
1.新增滚动条,需要设置div的高度height,如果div里面的内容超过height,则使用 overflow:auto; overflow:auto; 2.修改div滚动条样式 .div::-we ...
修改火狐浏览器滚动条样式
一.安装jquery和niceScroll ① npm install jquery ②在vue.config.js中添加如下代码 (如报ReferenceError: webpack is not ...

HTML div 滚动条样式设计

HTML div 滚动条样式设计相关推荐

最新文章

热门文章