实现一个渐变的滚动条
2023-03-20 14:52:32 时间
前言
之前写过一篇scroll-snap让你的滚动条更智能,在那篇文章中,主要介绍了,使用scroll-snap优化滚动,其实这也只是滚动需要优化的一点。其实滚动条才是最需要优化的,因为浏览器的多样性,各个浏览器在滚动条的样式上,也不统一。
当一个网站上线,我们尽可能的需要保证样式的一致性,美化滚动条可以解决这个统一的问题,当然了,你一个绚丽的页面,肯定不想出现丑了吧唧的滚动条吧!
滚动条
包含
滚动条包含下面7个元素:
-
::-webkit-scrollbar
:整个滚动条 -
::-webkit-scrollbar-button
:下下箭头按钮 -
::-webkit-scrollbar-thumb
:滚动滑块 -
::-webkit-scrollbar-track
:滚动条滑轨 -
::-webkit-scrollbar-track-piece
:滚动条没有滑块的轨道部分 -
::-webkit-scrollbar-corner
:横向滚动条与竖向滚动条的交汇处 -
::-webkit-resizer
:类似textarea
的可拖动按钮
位置
在日常的使用中,我们经常见到的是右侧+下边滚动条。其实还有一种滚动条是位于左侧。主要是出现在RTL类型的网页中。
因为中文的书写方式是LTR 类型,所以滚动条在右边。
新语法?鸡肋
目前新语法,仅支持 scrollbar-color, scrollbar-width.无法自定义其他内容,个人觉得比较鸡肋。
div {
scrollbar-color: rebeccapurple green;
scrollbar-width: thin;
}
复制代码
渐变的滚动条
定义滚动条容器
这里使用两个div。子div主要是用来保证父div可以出现滚动条。
<div class="scrollbar" id="style-7">
<div class="child"></div>
</div>
复制代码
父容器高度小于子元素高度:
.scrollbar
{
height: 300px;
}
.child{
min-height: 450px;
}
复制代码
定义整个滚动条
.scrollbar::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
复制代码
定义滑块渐变
.scrollbar::-webkit-scrollbar-thumb
{
border-radius:10px;
background-image: -webkit-linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
}
复制代码
这里强烈推荐一个渐变色配色网站,可以生成代码:uigradients.com/。
滑轨加点圆角
.scrollbar::-webkit-scrollbar-track
{
border-radius: 10px;
}
复制代码
后记
因为只是为了解决公司的问题,目前对scrollbar,了解不深,后面感觉得深入了解一下。
相关文章
- 金融服务领域的大数据:即时分析
- 影响大数据、机器学习和人工智能未来发展的8个因素
- 从0开始构建一个属于你自己的PHP框架
- 如何将Hadoop集成到工作流程中?这6个优秀实践必看
- SEO公司使用大数据优化其模型的5种方法
- 关于Web Workers你需要了解的七件事
- 深入理解HTTPS原理、过程与实践
- 增强分析:数据和分析的未来
- PHP协程实现过程详解
- AI专家:大数据知识图谱——实战经验总结
- 关于PHP的错误机制总结
- 利用数据分析量化协同过滤算法的两大常见难题
- 怎么做大数据工作流调度系统?大厂架构师一语点破!
- 2019大数据处理必备的十大工具,从Linux到架构师必修
- OpenCV中的KMeans算法介绍与应用
- 教大家如果搭建一套phpstorm+wamp+xdebug调试PHP的环境
- CentOS下三种PHP拓展安装方法
- Go语言HTTP Server源码分析
- Go语言HTTP Server源码分析
- 2017年4月编程语言排行榜:Hack首次进入前五十