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

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

滚动条的组成:

 ::-webkit-scrollbar         //滚动条整体部分

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

例子(只包含css部分):

.div::-webkit-scrollbar{
width: 6px; height: 6px; background-color: #f5f5f5;}/*定义滚动条的轨道,内阴影及圆角*/.div::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.6); border-radius: 3px; background-color: #f5f5f5;}/*定义滑块,内阴影及圆角*/.div::-webkit-scrollbar-thumb{ /*width: 10px;*/ height: 20px; border-radius: 3px; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.8); background-color: #f00;}

 

转载于:https://www.cnblogs.com/zhang-2052975439/p/7338799.html

你可能感兴趣的文章
Android项目——实现时间线程源码
查看>>
招商银行信用卡重要通知:消费提醒服务调整,300元以下消费不再逐笔发送短信...
查看>>
C#_delegate - 调用列表
查看>>
[转]Windows的批处理脚本
查看>>
多维数组元素的地址
查看>>
数据库运维体系_SZMSD
查看>>
福大软工1816 · 第三次作业 - 结对项目1
查看>>
静态库 调试版本 和发布版本
查看>>
JAVA中的finalize()方法
查看>>
慕课网学习手记--炫丽的倒计时效果Canvas绘图与动画基础
查看>>
基本分类方法——KNN(K近邻)算法
查看>>
.NET Framework3.0/3.5/4.0/4.5新增功能摘要
查看>>
熟悉常用的Linux操作
查看>>
面象过程与面象对象
查看>>
谷歌设置支持webgl
查看>>
js的AJAX请求有关知识总结
查看>>
Eclipse添加新server时无法选择Tomcat7的问题
查看>>
nginx 配置https 负载均衡
查看>>
双拓扑排序 HDOJ 5098 Smart Software Installer
查看>>
三分 POJ 2420 A Star not a Tree?
查看>>