css自定义滚动条颜色

针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式

滚动条组成部分

::-webkit-scrollbar 滚动条整体部分
. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方
::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

/*滚动条整体样式*/
.wrap::-webkit-scrollbar { width: 8px;height: 8px;
}
/*滚动条里面小方块*/
.wrap::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #60c5ff;
}
/*滚动条里面轨道*/
.wrap::-webkit-scrollbar-track {box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);/* border-radius: 10px; *//* background: #ededed; *//* background: #60c5ff; */
}

效果

注意只在chrome下有效！

css自定义滚动条颜色相关推荐

css自定义滚动条样式
代码 css自定义滚动条样式,webkit内核浏览器. /* 滚动条样式 */ ::-webkit-scrollbar {/* 滚动条的宽度 */width: 10px;margin-right: 7 ...
html 设置滚动条颜色,CSS设置滚动条颜色步骤
本文向大家描述一下如何使用CSS设置滚动条颜色,如果你在浏览网页的时候看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,那么这就是使用CSS代码设置的效果. CSS设置滚动条颜色我 ...
用css自定义滚动条样式
如果你是一个搞网页前端的,有必要了解一下自定义滚动条样式这个东东.目前支持自定义滚动条样式的有IE浏览器.webkit内核浏览器(chrome). IE下的滚动条样式 1.样式规则 scrollbar ...
学会使用 CSS 自定义滚动条，能让你做的产品更有用户体验！
作者:ishadeed 译者:前端小智来源:ishadeed 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq ...
CSS 自定义滚动条
滚动条的宽度首先,我们需要定义滚动条的大小.这可以是垂直滚动条的宽度,也可以是水平滚动条的高度. .section::-webkit-scrollbar {width: 10px; } 滚动条 tr ...
【常用代码06】CSS自定义滚动条样式 overflow-y开启滚动条
自定义滚动条样式默认滚动条样式如下↓ 首先设置div盒子然后给盒子开启滚动条这样超出高度或者宽度的内容将会被隐藏滚动就可以看到 // 开启y轴滚动条 overflow-y: auto; 修改后 ...
怎样用css设置横向的滚动条,如何用CSS设置滚动条颜色？
我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢? 页面滚动条代码及其解释如下: scroll ...
CSS修改滚动条颜色样式(右边滚动条、底部滚动条、div内滚动条)
如下 /* 滚动条宽度 */ ::-webkit-scrollbar{width:1px;} /* 滚动条轨道颜色 */ ::-webkit-scrollbar-track{background-co ...
html滚动条样式自定义,CSS自定义滚动条样式
今天心情很是不好呐,上午没来上班,钉钉申请通过,人事居然扣除我双倍工资,记过一次.次奥!***屌毛,长话短说,很是郁闷. -webkit-scrollbar 众所周知,浏览器默认的滚动条样式实在是.. ...

css自定义滚动条颜色

滚动条组成部分

注意只在chrome下有效！

css自定义滚动条颜色相关推荐

最新文章

热门文章