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 ...
随机推荐
- 解析Vue-router相关干货及工作原理
本文主要介绍了vue-router相关基础知识及单页面应用的工作原理,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 单页面工作原理是通过浏览器U ...
- Centos-搜索文件或目录-find
find 在指定的目录下查找指定的文件 相关选项 -type 指定文件类型 -name 指定文件名字,支持通配符 -gid 指定用户组ID -uid 指定用户ID -empty 查找长度为 ...
- Spring系列之事务的控制 注解实现+xml实现+事务的隔离等级
Spring系列之事务的控制 注解实现+xml实现 在前面我写过一篇关于事务的文章,大家可以先去看看那一篇再看这一篇,学习起来会更加得心应手 链接:https://blog.csdn.net/pjh8 ...
- 对offsetof、 container_of宏和结构体的理解
offsetof 宏 #include<stdio.h> #define offsetoff(type, member) ((int)&((type*)0)->me ...
- WJQ与机房
sample input 5 6 7 2 3 1 1 5 0 6 0 0 8 6 6 5 3 4 3 7 8 2 4 0 0 6 9 sample output 20 样例解释: 分别以(2,1)为左 ...
- ElasticSearch 索引 VS MySQL 索引
前言 这段时间在维护产品的搜索功能,每次在管理台看到 elasticsearch 这么高效的查询效率我都很好奇他是如何做到的. 这甚至比在我本地使用 MySQL 通过主键的查询速度还快. 为此我搜索了 ...
- 带有Firebase的离子2:在OAuth 2中签名
介绍 这是一个指南,展示如何在Android上使用Firebase认证谷歌用户. 背景 虽然很多人都写过这个指南,但是他们没有解释一个关键的部分--为什么在执行了每一步之后仍然会看到认证错误12501 ...
- ansible-的修改配置文件
1. ansible的配置文件 1 [root@1-230 python-2.7.5]# tree /etc/ansible/ 2 /etc/ansible/ 3 ├── ansible.cfg 4 ...
- mysql CHAR and VARCHAR 比较
写在前面 面试的时候突然有一位面试官问,说说CHAR和VARCHAR的区别,懵逼了,想自己平常使用的时候直接把VARCHAR拿来就用,真没注意到其中的不同. 反思,为什么没有注意到他们的不同 对于my ...
- Python日志采集（详细）
通常在前期调试代码的时候,我们会使用print在IDE控制台打印一些信息,判断运行情况.但在运行整个自动化测试项目的过程中,通过print打印信息的方式获取运行情况显然行不通. 这时就需要收集日志,每 ...