CSS Scrollbar (滚动条)
类名
|
作用
|
::-webkit-scrollbar
|
滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
|
::-webkit-scrollbar-button
|
滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
|
::-webkit-scrollbar-track
|
外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
|
::-webkit-scrollbar-track-piece
|
内层轨道,滚动条中间部分(除去)。
|
::-webkit-scrollbar-thumb
|
滚动条里面可以拖动的那部分
|
::-webkit-scrollbar-corner
|
边角
|
::-webkit-resizer
|
定义右下角拖动块的样式
|
::-webkit-scrollbar {width: 6px; /* 竖向滚动条宽度 */height: 6px; /* 横向滚动条高度 */
}::-webkit-scrollbar-thumb {border-radius: 10px; /* 滚动条样式 */-webkit-box-shadow: inset 0 0 3px red; /* 内阴影 */background-color: blue; /* 滚动条颜色 */
}::-webkit-scrollbar-thumb:hover {background-color: black; /* 滚动条悬浮颜色 */
}::-webkit-scrollbar-track-piece {background: palegreen; /* 滚动条背景颜色 */
}::-webkit-scrollbar-button {background-color: blue; /* 定义两端按钮的样式 */
}::-webkit-scrollbar-corner {background: red; /* 右下角重合处的样式*/
}/* 单独设置悬浮颜色 */
::-webkit-scrollbar-thumb:vertical {background: yellow; /* 竖向滑块颜色 */
}
::-webkit-scrollbar-thumb:horizontal {background: orange; /* 横向滑块颜色 */
}/* 单独设置滚动条背景色 */
::-webkit-scrollbar-track-piece:vertical {background: palevioletred;
}
::-webkit-scrollbar-track-piece:horizontal {background: blueviolet;
}
* {scrollbar-color: #e5e5e5 #f7f7f9; /* 滑块颜色 滚动条背景颜色 未生效 */scrollbar-width: thin; /* 滚动条宽度有三种:thin、auto、none */
}
滚动条样式
|
支持情况
|
支持浏览器版本
|
可否继承
|
描述
|
scrollbar-3dlight-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动框的和滚动条箭头左上边缘的颜色
|
scrollbar-highlight-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动框的和滚动条箭头左上边缘的颜色
|
scrollbar-face-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动框和滚动条箭头的颜色
|
scrollbar-arrow-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动条箭头的颜色
|
scrollbar-shadow-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动框的和滚动条箭头右下边缘的颜色
|
scrollbar-dark-shadow-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动条槽的颜色
|
scrollbar-base-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动条主要构成部分的颜色
|
scrollbar-track-color
|
IE特有属性
|
IE5.5+
|
y
|
设置滚动条轨迹组成部分的颜色
|
CSS Scrollbar (滚动条)相关推荐
- css隐藏滚动条、兼容
css隐藏滚动条 .scrollbar{scrollbar-width: none;-ms-overflow-style: none; } .scrollbar::-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 ...
- 如果不需要CSS隐藏滚动条
本文翻译自:CSS hide scroll bar if not needed I am trying to figure out how I can hide the overflow-y:scro ...
- CSS Scrollbar
CSS中若在块级容器上设置了overflow:scroll/overflow-x:scroll/overflow-y:scroll属性,当块级内容区域超出块级元素范围时会以滚动条的形式展示,可以滚动里 ...
- 怎样用css设置横向的滚动条,如何用CSS设置滚动条颜色?
我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢? 页面滚动条代码及其解释如下: scroll ...
- css前端滚动条无效,滚动条css失效,求助~~~~~~~~~~~~~~~~~~
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 以前一直用下面的css放在stylish里面,实现鼠标悬浮至滚动条处,显示滚动条,平时滚动条是隐藏的. 可以最近几天,不管换哪个css,滚动条都没有变化- ...
- html css 水平滚动条,html/css/js-横向滚动条的实现
在前端UI设计时,网页的制作很麻烦,深有感悟!碰到太多的不懂,或是第一次见,就要去网上找资料!横向滚动条就是我遇到麻烦中其中的一个,其实也 很简单,只是在几次项目中都用到了这个横向滚动条所以就拿出来说 ...
- 【前端大概一分钟】css隐藏滚动条同时可以滚动
1. 通过 ::-webkit-scrollbar 伪元素 .inner-container::-webkit-scrollbar {display: none; } 复制代码 简单粗暴,但是兼容性不 ...
最新文章
- 对偶问题(dual problem)
- JS实现图片的不间断连续滚动
- linux必会命令 - 后台运行程序 - nohup、
- pte模拟考试_首考七炸!PTE首战即告捷,拿下爱丁堡大学直通offer
- 哈希表及哈希冲突解决办法
- 来潮汕,这些食物不吃后悔一辈子...
- JVM性能提升50%,聊一聊背后的秘密武器Alibaba Dragonwell
- 联想小新模式切换不了_精彩,不止一屏!联想多款消费新品亮相秋季发布会
- 吴恩达深度学习之三《结构化机器学习项目》学习笔记
- QCon思考之通过Quora和Spotify案例,直击数据处理背后的魅影
- Python数据结构与算法(一)列表和元组
- 你想在网易云音乐中播放 QQ 音乐中下载的歌曲吗?用上它后助你秒实现!
- SPSS应用于均值检验
- 96114198交易失败_通过工行网银向境外汇款提示“96111444,系统错误”,如何处理?...
- 引导从打游戏到学计算机,【润笙学堂】暑假孩子沉迷游戏?妈妈一招化解!
- 室内红外线防盗报警器matlab,红外防盗报警系统毕业设计论文.doc
- 金蝶云星空总账-基础设置
- 启善企业微信自动加好友助手教程
- 治愈系好声线:唱见散搭
- 计算机主机安装图,最新版本:计算机主机插件安装图_布法罗计算机主板安装图...