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 ...
随机推荐
- kali一些基础工具
目录 netcat netcat https://blog.csdn.net/fageweiketang/article/details/82833193 网络工具当中的瑞士军刀 -nc指令,nc可以 ...
- kali学习wiki
https://github.com/Keybird0/Kali-learning-notes/wiki
- 图文并茂C++精华总结 复习和进阶
字面常量不可以有引用,因为这也不需要使用符号来引用了,但是字面常量却可以初始化const引用,这将生成一个只读变量: 对变量的const修饰的引用是只读属性的: 也就是说,const修饰的引用,不管是 ...
- Linux设置主机名称与host映射
uname -n :查看host对应的域名 2.在 /etc/hostname 删除原来的重新配置需要的域名 3.在 /etc/hosts 中添加域名和映射ip 4.重启系统 5.其他主机 ...
- 044 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 06 使用do-while循环实现猜字游戏
044 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 06 使用do-while循环实现猜字游戏 本文知识点:do-while循环深入运用 案例练习 案例 ...
- 01 Arcgis10.6 安装教程
一.ArcGIS系统要求 包括: Win7 SP1(及以上) 32/64位系统 Win8.1 32/64位系统 Win10 32/64位系统 二.下载ArcGIS 10.6安装文件 链接:https: ...
- python中def用法
转载:https://blog.csdn.net/qq_21466543/article/details/81604826 一.函数调用的含义 函数是类似于可封装的程序片段.允许你给一块语句一个名字, ...
- RHSA-2017:2930-重要: 内核 安全和BUG修复更新（需要重启、存在EXP、本地提权、代码执行）
[root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 修复命令: 使用root账号登陆She ...
- C# 用IrisSkin4.dll美化你的WinForm
如果需要查看更多文章,请微信搜索公众号 csharp编程大全,需要进C#交流群群请加微信z438679770,备注进群, 我邀请你进群! ! ! --------------------------- ...
- leaflet中如何优雅的解决百度、高德地图的偏移问题
话不多说,先上效果图 以前在做项目时,经常会听到客户说,你们这个地图是哪来的,太丑了,能不能换成百度地图--高德也行-- 大家生活中,基本上都已经习惯了使用百度地图和高德地图,而在做项目时,用这两个地 ...