css为div设计自定义滚动条样式
时间:2017-11-05
html中默认滚动条的样式都是不美观的,为了让页面更加好看,我们需要自己设计滚动条样式,本文章向大家介绍css自定义滚动条样式的几个实例,需要的朋友可以参考一下。
自定义滚动条越来越受欢迎,你可能在其他网站上看到过非常漂亮的滚动条,漂亮的滚动条使网站看起来不同。实现自定义滚动条有很多种方法。在本教程中,我们将使用CSS3来实现自定义滚动条样式(css是最简单的方法,有jQuery插件可以帮助定制滚动条,但我不喜欢添加更多的JavaScript到我的网站。如果你只是想让你的网站有一个很酷的滚动条,那么你也可以考虑使用jQuery插件)。
滚动条的css样式主要由7部分组成:
::-webkit-scrollbar
滚动条本身的背景。::-webkit-scrollbar-button
滚动条上方的方向按钮。::-webkit-scrollbar-track
进度条下方的空白空间。::-webkit-scrollbar-track-piece
进度条的最顶层没有被大拇指覆盖。::-webkit-scrollbar-thumb
可拖动滚动元素的大小取决于可滚动元素的大小。::-webkit-scrollbar-corner
滚动元素的底部角落,两个滚动条相遇。::-webkit-resizer
出现在某些元素的底部角落的滚动条角上方的可拖动调整大小的句柄。
实现方法:
1. html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Customize the Browser's Scrollbar with CSS</title>
<link type="text/css" rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
</body>
</html>
2. css文件
.scrollbar {
background-color: #F5F5F5;
float: left;
height: 300px;
margin-bottom: 25px;
margin-left: 22px;
margin-top: 40px;
width: 65px;
overflow-y: scroll;
}
.force-overflow {
min-height: 450px;
}
#style-1::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb {
background-color: #000000;
}
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
- 不掌握这几个人工智能编程语言怎么能说懂AI
- Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
- 大数据之Yarn——Capacity调度器概念以及配置
- 移动端web开发,click touch tap区别
- 大数据学习之路(持续更新中...)
- 如何养成良好的c++编程习惯(1)——内存管理
- 使用jOrgChart插件实现组织架构图的展示
- Spark源码分析 之 Driver和Excutor是怎么跑起来的?(2.2.0版本)
- webpack入门——webpack的安装与使用
- Portal-Basic Java Web应用开发框架V3.0正式发布(源码、实例及文档)
- ELK5.0安装教程
- 替换空格
- JavaScript实现段落文本高亮
- 原生js实现简单移动端轮播图
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- QT学习第4天:qt点击鼠标画一条直线(附源代码和程序)
- 跨站请求伪造——CSRF
- 13-6 编辑多个文件和保存
- 汇编基础
- php 使用AMQP扩展调用RabbitMq
- 聊聊RedisTokenVisitor
- R语言几行代码拼接pdf文件
- 一次 Redis 分布式锁事故,整个项目组被扣绩效了。。。
- 小程序访问https显示网络错误,微信打开https空白、浏览器访问正常 解决方案
- Python GUI项目实战(七)学生信息的修改、删除和保存
- Python | 使用argparse解析命令行参数
- LeetCode 98 | 判断二叉搜索树是否合法
- LeetCode 96,n个数构建BST的方法有多少种?
- Go语言 | goroutine不只有基础的用法,还有这些你不知道的操作
- 每日一题 | 二进制操作问题