博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3自定义滚动条样式 -webkit-scrollbar
阅读量:5267 次
发布时间:2019-06-14

本文共 852 字,大约阅读时间需要 2 分钟。

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

 

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

 

转载于:https://www.cnblogs.com/lilongji/p/8136408.html

你可能感兴趣的文章
bzoj3224 splay板子
查看>>
程序存储问题
查看>>
Mac版OBS设置详解
查看>>
优雅地书写回调——Promise
查看>>
android主流开源库
查看>>
AX 2009 Grid控件下多选行
查看>>
PHP的配置
查看>>
Struts框架----进度1
查看>>
Round B APAC Test 2017
查看>>
MySQL 字符编码问题详细解释
查看>>
Ubuntu下面安装eclipse for c++
查看>>
让IE浏览器支持CSS3圆角属性的方法
查看>>
巡风源码阅读与分析---nascan.py
查看>>
LiveBinding应用 dataBind 数据绑定
查看>>
Linux重定向: > 和 &> 区别
查看>>
nginx修改内核参数
查看>>
C 筛选法找素数
查看>>
TCP为什么需要3次握手与4次挥手(转载)
查看>>
IOC容器
查看>>
Windows 2003全面优化
查看>>