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 ...
随机推荐
- 吴恩达Machine Learning学习笔记（一）
机器学习的定义 A computer program is said to learn from experience E with respect to some class of tasks T ...
- JavaScript的this到底代表谁？（this指向哪里？）
在很多编程语言中都有this这个特殊关键字的存在,比如Java中的this,还有本文要说到的JavaScript中的this.那么,JavaScript中this究竟有什么特性和用法呢?它又是如何定义 ...
- Vue登录注册，并保持登录状态
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一 ...
- Python-组织结构-目录结构、包导入、__init__文件、模块内置变量、* 导入限制
__pycache__ .pyc文件,中间代码,提升python运行效率 目录 分档和归类 Python项目组织结构 包 模块 类 函数.变量 # 层级依次往下都是一对多关系 Python项目目录结构 ...
- Linux 串口工具 lsz lrz 移植
//之前写的,刚才不小心误删了,所以重新再发出来. 1 下载源码包 首先下载最新版的lrzsz,地址:https://ohse.de/uwe/software/lrzsz.html.下面以 0.12. ...
- JavaFX FileChooser文件选择器、DirectoryChooser目录选择器
参考:https://www.yiibai.com/javafx/javafx_filechooser.html 参考:https://blog.csdn.net/dorma_bin/article/ ...
- Centos下Oracle11gR2安装教程与自动化配置脚本
系统环境准备 开发组件与依赖库安装 安装centos时选择Server with GUI,右面的可以不勾选,后面统一来装 配置本地yum源 以上包如果缺乏可配置本地yum源进行安装 sudo moun ...
- Windows 编程基础
1 Windows应用程序的分类 1.1 控制台程序 DOS程序,本身没有窗口,通过WINDOWS下的DOS窗口执行. 1.2 窗口程序 拥有自己的窗口,通过窗口可以和用户进行交互.(比如:记事本,画 ...
- roles学习笔记（模拟安装httpd服务）
这是目录(app 是模拟的角色) [root@test ansible]# tree.├── app_role.retry├── app_role.yml├── httpd_role.yml├── n ...
- 多测师讲解pthon _函数__return_高级讲师肖sir
#函数中的返回的作用(return) 案例: #函数中的返回的作用:def fun(): #定义的一个函数 num =100 a=num/2 #print(a) #50.0 return a # pr ...