::-webkit-scrollbar 滚动条的设置

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

自定义滚动条简单版：

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
.scrollbar::-webkit-scrollbar{width: 16px;height: 16px;background-color: #f5f5f5;
}
/*定义滚动条的轨道，内阴影及圆角*/
.scrollbar::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);border-radius: 10px;background-color: #f5f5f5;
}
/*定义滑块，内阴影及圆角*/
.scrollbar::-webkit-scrollbar-thumb{/*width: 10px;*/height: 20px;border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #555;
}

::-webkit-scrollbar 滚动条的设置相关推荐

jQuery插件：Tiny Scrollbar滚动条插件（滚动条美化、默认滚动条）
Tiny Scrollbar是基于jQuery的滚动条插件, 风格简洁, 可自定义样式, 体积较小. 插件特点: 支持iPhone, iPad, Android 新版1.8,可以在移动设备上滚动内容 ...
swiper监听滚动条_swiper Scrollbar滚动条组件详解
本文实例为大家分享了swiper Scrollbar滚动条组件的具体代码,供大家参考,具体内容如下 1.scrollbar 为Swiper增加滚动条.类型:object. 2.el scrollbar ...
Javascript - 实现Javascript控制ScrollBar(滚动条) - 学习/实践
1.应用场景主要用于控制srollbar的位置, 实现界面定位效果. 2.学习/操作在Javascript中有三种方法能够控制滚动条的位置. 方法一:用scroll函数实现 scroll(x,y) ...
html的text滚条设置,textarea 滚动条属性设置
scrollbar属性.样式详解 1．overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置以上 ...
vue el-table 滚动条样式设置(谷歌、火狐)
对于el-table滚动条的样式,webkit(谷歌为代表)和 moz(火狐)的设置是不同的,因此需要分别进行设置. webkit(谷歌) // 滚动条大小设置 ::v-deep .el-table_ ...
swing开发scrollbar滚动条样式
swing开发scrollbar滚动条样式简介效果图实现代码简介由于swing自带的滚动条又宽样式又不好看,所以,这里重写了一下滚动条,让滚动条看起来不是那么low. 效果图实现代码 1. ...
CSS中滚动条样式设置
滚动条样式设置 ::-webkit-scrollbar滚动条整体部分 ::-webkit-scrollbar-thumb滚动条里面的小方块---滑块,能向上向下移动(或往左往右移动,取决于是垂直滚动条 ...
Iframe用法的详细讲解(属性、透明、自适应高度)和html中滚动条属性设置
Iframe 用法的详细讲解(属性.透明.自适应高度)和html中滚动条属性设置 scrollbar属性.样式详解 1． overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overfl ...
CSS中关于滚动条样式设置的代码实例
因为在模拟开发冒险岛2游戏官网的时候,遇到一个关于滚动条样式设置的问题,如果我们不设置滚动条的样式,那么如下图所示:(特别丑陋) 但是在冒险岛的官网上呈现的样式却是: 明显感觉到视觉上的不同,那么现在 ...
滚动条如何设置样式和滚动条悬浮显示与隐藏
文章目录一.滚动条如何设置样式 1:滚动条的默认样式(如下图) 1:html代码 2:css代码 3:效果图 2:CSS设置滚动条的属性(重点) 3:设置滚动条的例子 1:css代码(在第1步的基础 ...

::-webkit-scrollbar 滚动条的设置

::-webkit-scrollbar 滚动条的设置相关推荐

最新文章

热门文章