前端特效 | 如何制作一个彩虹滚动进度条?
xsobi 2024-12-05 17:29 2 浏览
作为一个前端工程师,在建设自己的网站的时候,肯定有一个冲动,就是把各个模块按照自己的意愿进行的DIY设计。比如,在浏览器滚动的时候,为页面设计一个漂亮的滚动进度条。根据滚动的距离,来动态地展示已经滚动的进度。
一、实现效果
今天分享一个很只需要几行代码就能搞定的彩虹滚动进度条。大致的样子如下图所示。
二、实现原理
其实这个功能说来也非常简单,核心就是将页面监听滚动距离与能够滚动的距离的百分比赋值给进度条的width属性。
(1)HTML & CSS 部分
将progress的dom固定定位到top:0的位置,宽度设置为0%,因为要做彩虹的颜色,就设置了7个dom设置不同的颜色,把它们的一眼的高度属性提出来,设置了一个统一的css变量。
<div id="progress-bar">
<div id="red"></div>
<div id="orange"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="indigo"></div>
<div id="purple"></div>
</div>
:root {
--progress-bar-height: 10px;
}
#progress-bar {
width: 0%;
position: fixed;
top: 0;
left: 0;
}
#red {
background-color: #FF0000;
height: var(--progress-bar-height);
}
// 其他颜色
...
(2)JavaScript 部分
在开始之前先普及一个知识点,那就是scrollHeight、clientHeight和scrollTop这三个属性各代表什么。
- document.body.clientHeight就是网页可见区域
- document.body.scrollHeight就是网页的总高度
- document.body.scrollTop就是已经滚动的距离
而我们要做的就是,先找到整个页面能够滚动的距离,那就是上面的第二项数值减去第一项的数值。
const needScroll = document.body.scrollHeight - document.documentElement.clientHeight;
之后监听滚动scroll事件,来获取当前滚动的距离。document.body.scrollTop就是滚动条向下滚动的距离,也可以说是元素顶部被遮住部分的高度。
window.addEventListener('scroll', () => {
const haveScrolled = document.body.scrollTop || document.documentElement.scrollTop;
})
最后通过求出滚动的百分比,赋值给progress的width属性即可。
progressBar.style.width = haveScrolled / needScroll * 100 + '%';
这样就能得到效果了,这里只简述原理,更多的效果、适配就不再多说。其实,我们不仅仅能做成一个横向的进度条,我们也可以将他做成一个圆环,或者像安卓手机充电时的效果等等,这些就靠我们自己发挥奇思妙想了。
相关推荐
- Android Studio 导入项目出现缺失解决
-
很多朋友安装好Androidstudio后准备试一把,但是导入项目的时候出现错误Cannotfindfile"...../project_name/settings.jar"这个错误是因为导入...
- 首个安卓12开发者预览版发布:隐私保护升级、更新UI、优化性能
-
来源:环球网2月20日消息,据engadget报道,来到二月,惯例也是谷歌发布安卓12开发者预览版的时候,以便于让开发者提前查看下一版安卓系统的新属性。谷歌工程副总裁戴夫·波尔克(DaveBurke...
- 推荐几个非常有用的开发工具之Android Studio插件
-
我们都知道Eclipse开发Android将在今年年底google不再继续提供相应的开发支持,转而开始强烈发展AndroidStudio,现在我就分享几款能帮助团队提升工作效率的几个Android...
- Android Studio下的应用性能优化总结-内存优化
-
上一篇文章总结的布局优化的问题,如果对布局优化不是很熟悉的,可以看一下AndroidStudido下的应用性能优化总结–布局优化,这周一直筹划总结一下内存优化的问题,因为现在对于应用优化的文章很...
- 安卓开发之环境搭建「图文教程」 安卓应用开发环境搭建
-
安卓(Android)是一种基于Linux的自由及开放源代码的操作系统。主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。接下来开始第一个安卓应用吧!需要用到的软...
- Android APP性能测试上篇--启动时长、内存
-
如图所示,列出了目前app主要的一些性能指标,以及对应使用的测试工具。普遍的app性能测试,主要是以下几类:启动时长、内存、cpu、FPS(app使用的流畅度)、GPU过度渲染、耗电、耗流、cras...
- AndroidStudio下的依赖管理 安卓依赖管理
-
在开发中用第三方库是很常见的事,如何在AndroidStudio下管理这些依赖呢?这就是这篇文章的目的。目录Maven/Ivy仓库依赖Module依赖aar文件依赖jar文件依赖例子完整代码一、Mav...
- 基于Android的师生学习交流平台:Android课程设计
-
基于Android的师生学习交流平台(Androidstudio毕业设计,Android课程设计)一、项目介绍系统分为学习资料,作业,师生交流,个人资料四大模块(1)学生端:新用户需要填写真实姓名,...
- Android Studio 贴士 - 综述#3 android studios
-
(点击上方公号,可快速关注)英文原文:http://www.developerphil.com/android-studio-tips-of-the-day-roundup-3注:文中链接皆为国外链接...
- Android 11 Developer Preview首次更新发布:修复诸多问题
-
此前在2月19日,谷歌放出了Android11DeveloperPreview(安卓11开发者预览版),并表示Beta版本将于5月份推出,最终发行版将于2020年Q3面世。如今距离Android...
- Android12 支持无线usb调试应用 安卓 usb调试
-
背景在android12版本中已经支持wifiusb调试了,再也不用查数据线了,下面主要说下连接步骤:1.在开发者启动无线调试...
- InstantRun原理--深度剖析AndroidStudio2.0
-
http://crash.163.com/#news/!newsId=8推荐理由AndroidStudio2.0开始支持InstantRun特性,使得在开发过程中能快速将代码变化更新到设...
- 集成开发环境Android Studio整合Gemini:可生成、补全代码
-
IT之家4月9日消息,谷歌近日发布新闻稿,宣布在AndroidStudio中集成Gemini1.0Pro,从而帮助开发人员更快、更好地写出代码。谷歌表示目前相关整合仍处于预览阶段,...
- Android studio 最新版本下Gradle的一些配置
-
当我们把Androidstudio版本更新到Bumblebee版本时,我们会发现创建新的项目时,有了一些改变。项目根目录下面的build.gradle变了:旧版本下的是这样子的:setting.gr...
- Android Studio最新版下载安装:Android Studio模拟器怎么启动
-
目录第一部分:AndroidStudio软件介绍...
- 一周热门
- 最近发表
-
- Android Studio 导入项目出现缺失解决
- 首个安卓12开发者预览版发布:隐私保护升级、更新UI、优化性能
- 推荐几个非常有用的开发工具之Android Studio插件
- Android Studio下的应用性能优化总结-内存优化
- 安卓开发之环境搭建「图文教程」 安卓应用开发环境搭建
- Android APP性能测试上篇--启动时长、内存
- AndroidStudio下的依赖管理 安卓依赖管理
- 基于Android的师生学习交流平台:Android课程设计
- Android Studio 贴士 - 综述#3 android studios
- Android 11 Developer Preview首次更新发布:修复诸多问题
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- strcat (25)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- element style (30)
- dedecms模版 (53)
- vs打不开 (29)
- nmap (30)
- webgl开发 (24)
- c 视频教程下载 (33)
- paddleocr (28)
- listview排序 (33)
- firebug 使用 (31)
- transactionmanager (30)
- characterencodingfilter (33)
- getmonth (34)
- commandtimeout (30)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)
- android studio 3 0 (34)