div自定义滚动条样式

有时默认的滚动条样式不能很好的适配我们的页面，因此需要自定义滚动条样式

参数说明

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

CSS示例

container{max-height:910px;overflow:auto;
}
container::-webkit-scrollbar{width:8px;height:8px;background-color: #61B6EB;
}
container::-webkit-scrollbar-track{background: #213147;border-radius:2px;
}
container::-webkit-scrollbar-thumb{background: #61B6EB;border-radius:2px;
}
container::-webkit-scrollbar-thumb:hover{background: #61B6EB;
}
container::-webkit-scrollbar-corner{background: #61B6EB;
}

div自定义滚动条样式相关推荐

【CSS】DIV 自定义滚动条样式
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义来自:DIV 自定义滚动条样式滚动条的css样式主要有三部分组成 ::- ...
html div 隐藏滚动条样式,div滚动条样式隐藏与显示
DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢? 要设置CSS滚动条样式,需要用到overflow-y和overflo ...
div横向超出可滚动，自动添加滚动条，自定义滚动条样式，
先看一下最终的效果图吧: 第一种文字内容超出显示滚动条: 父盒子:横向超出滚动:overflow-x: scroll; .box {width: 100%;box-sizing: border-box ...
用css自定义滚动条样式
如果你是一个搞网页前端的,有必要了解一下自定义滚动条样式这个东东.目前支持自定义滚动条样式的有IE浏览器.webkit内核浏览器(chrome). IE下的滚动条样式 1.样式规则 scrollbar ...
【常用代码06】CSS自定义滚动条样式 overflow-y开启滚动条
自定义滚动条样式默认滚动条样式如下↓ 首先设置div盒子然后给盒子开启滚动条这样超出高度或者宽度的内容将会被隐藏滚动就可以看到 // 开启y轴滚动条 overflow-y: auto; 修改后 ...
android 滚动条自定义样式,IScroll的使用-方向键绑定自定义滚动条样式
之前在webkit上开发一个滚动控件,需要完成的是一段文字,上下键可以滚动,且自定义滚动条.第一想法就是浏览器原生overflow:scroll,且webkit支持自定义滚动条样式: webkit自定 ...
滚动条样式设置_自定义滚动条样式
自定义滚动条样式,设置样式即可: /* 设置滚动条的样式 */ ::-webkit-scrollbar {width: 8px;height: 8px;background: transparent; ...
Vue项目自定义滚动条样式【火狐、谷歌、360】
Vue项目中自定义浏览器的滚动条样式,已解决火狐.谷歌.360 火狐浏览器谷歌和360 火狐浏览器 // 火狐浏览器专属 // 仅有scrollbar-color.scrollbar-width两个 ...
CSS 滚动条: 自定义滚动条样式
CSS 滚动条: 自定义滚动条样式文章目录 CSS 滚动条: 自定义滚动条样式前言正文 overflow & ::-webkit-scrollbar 实际效果(自定义滚动条.隐藏滚动条) ...

div自定义滚动条样式

参数说明

CSS示例

div自定义滚动条样式相关推荐

最新文章

热门文章