css3滚动条样式美化
关于滚动条的设计，需要用到css3的微元素，都列在下边吧（以Chrome内核webkit为例）。
-webkit-scrollbar 滚动条的整体轮廓，width表示纵向滚动条的宽度，height表示横向滚动条的高度。
-webkit-scrollbar-track 滚动轨迹
-webkit-scrollbar-thumb 滚动滑块
-webkit-scrollbar-corner 滚动条右下角的小正方形
做个例子参考一下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 .box{
9 width: 800px;
10 height: 500px;
11 overflow: auto;
12 margin: 20px auto;
13 background-color: #ccc;
14 border: 1px solid #ccc;
15 border-radius: 10px;
16 padding: 5px;
17 }
18 .box::-webkit-scrollbar{
19 width: 6px;
20 height: 6px;
21 }
22 .box::-webkit-scrollbar-track, .box::-webkit-scrollbar-thumb{
23 border-radius: 999px;
24 }
25 .box::-webkit-scrollbar-track{
26 background-color: rgba(0, 0, 0, 0.2);
27 }
28 .box::-webkit-scrollbar-thumb{
29 background-color: rgba(90, 18, 18, 0.5);
30 }
31 .box::-webkit-scrollbar-corner{
32 background: transparent;
33 }
34 p{
35 color: #6e3737;
36 text-align: center;
37 line-height: 30px;
38 white-space: nowrap;
39 }
40 </style>
41 </head>
42 <body>
43 <div class='box'>
44 <p>css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化</p>
45 <p>1</p>
46 <p>2</p>
47 <p>3</p>
48 <p>4</p>
49 <p>6</p>
50 <p>7</p>
51 <p>8</p>
52 <p>9</p>
53 <p>9</p>
54 <p>9</p>
55 <p>9</p>
56 </div>
57 </body>
58 </html>
css3滚动条样式美化的更多相关文章
- 自定义滚动条样式-兼容IE
滚动条样式设置 html部分: 1 <div id="scroll" style="width: 500px; height: 300px; border: 2px ...
- NB的CSS样式集锦1——CSS3滚动条美化,CSS3滚动条皮肤
转自:http://www.pengyaou.com/codecss3/POKDNMS_112.html CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrol ...
- css3美化滚动条样式
1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...
- CSS3滚动条美化,CSS3滚动条皮肤
CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这 ...
- CSS3自定义滚动条样式 -webkit-scrollbar(转)
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS3自定义滚动条样式 -webkit-scrollbar
今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- 笔记：css3伪选择器改变滚动条样式
现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...
- 【CSS3】自定义滚动条样式 -webkit-scrollbar
好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scroll ...
随机推荐
- 文档驱动 —— 表单组件（六）：基于AntDV的Form表单的封装，目标还是不写代码
开源代码 https://github.com/naturefwvue/nf-vue3-ant 也不知道大家是怎么写代码的,这里全当抛砖引玉 为何封装? AntDV非常强大,效果也非常漂亮,功能强大, ...
- 关于人人开源renren-fast-vue 中npm install各种报错的解决方案
首先吐槽一下,因为这个问题我整了好几天,把报错信息复制百度,试遍了各种方法,node.js我是卸载了安装,安装了卸载,甚至renren-fast-vue我也删了再下,然后再删,无限循环.然而没有什么软 ...
- java安全编码指南之:敏感类的拷贝
目录 简介 一个简单的SensitiveObject SensitiveObject的限制 对SensitiveObject的攻击 解决办法 简介 一般来说class中如果包含了私有的或者敏感的数据的 ...
- C# Redis分布式锁 - 单节点
为什么要用分布式锁? 先上一张截图,这是在浏览别人的博客时看到的. 在了解为什么要用分布式锁之前,我们应该知道到底什么是分布式锁. 锁按照不同的维度,有多种分类.比如 1.悲观锁,乐观锁; 2.公平锁 ...
- vs工程生成dll文件及其调用方法
转载:https://blog.csdn.net/weixin_44536482/article/details/91519413 vs工程生成dll文件及其调用方法 ...
- Arduino control Eeprom by IIC method of using device address in Arduino
参考: 1.https://www.arduino.cc/ 2.https://www.arduino.cc/reference/en/ 3.https://www.arduino.cc/en/Ref ...
- k8s的namespace一直Terminating的完美解决方案
k8s的namespace一直Terminating的完美解决方案 在k8s集群中进行测试删除namespace是经常的事件,而为了方便操作,一般都是直接对整个名称空间进行删除操作. 相信道友们在进行 ...
- [学习笔记] Treap
想必大家都知道一种叫做二叉搜索树这东西吧,那么我们知道,在某些特殊情况下,二叉搜索树会退化成一条链,而且如果出题人成心想卡你的话也很简单,分分钟把你(n log n)的期望卡成.那么我们该如何避免这种 ...
- centos7 yum 安装nodejs、npm、cnpm、pm2、yarn
一.环境准备 1.1 查看系统环境 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) [ ...
- Kubernetes K8S之存储ConfigMap详解
K8S之存储ConfigMap概述与说明,并详解常用ConfigMap示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-master CentOS ...