原生js页面滚动顶部显示滚动总进度条效果
最终效果:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style>*{margin:0;padding:0;}.box{height:3000px;width:100%;background:#ccc;}.progress{position:fixed;top:0;height:5px;background:red;}</style><title>原生js页面滚动顶部显示滚动总进度条效果</title>
</head>
<body><div class="progress"></div><div><div class="box">1</div></div>
</body>
<script>(function(){let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight; // 页面总高度let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; // 浏览器视口高度let scrollAvail = pageHeight - windowHeight; // 可滚动的高度console.log('可滚动的高度:', scrollAvail);window.onscroll = function () {let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动条的高度console.log('滚动条的高度:', scrollTop);document.querySelector('.progress').style.width = (scrollTop/scrollAvail)*100 + '%'; // 计算占比};}());
</script>
</html>
原生js页面滚动顶部显示滚动总进度条效果相关推荐
- 原生js实现文字循环向上滚动效果
原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...
- location.hash 原生js页面跳转/路由
使用vue开发项目非常方便,vue全家桶让你想实现什么功能都更加便捷,但是使用原生js,jquery开发,页面之间跳转怎么实现呢, 下面说一下window.location.hash,概念性的东西大家 ...
- 原生JS实现移动端模块的左右滑动切换效果,基于vue、stylus
原生JS实现移动端模块的左右滑动动画效果,基于vue.stylus 大概实现方案: 手指touch屏幕的整个过程,会派发touchstart.touchmove.touchend三个事件,对这三个事件 ...
- 网易云歌词居中滚动、点击/滑动进度条对应滚动、当前播放歌词高亮
当前播放歌词高亮:根据当前播放时间,和歌词时间对比,获得当前歌词行数索引正常居中滚动.点击/滑动进度条对应滚动:(1)因为这几种方式都是改变当前播放时间,所以只需要根据当前播放时间操作即可(2)根据当 ...
- html打印进度条不显示,LODOP打印URL显示和隐藏进度条
不建议使用ADD_PRINT_URL: 由于Lodop借用IE下载引擎,与非IE浏览器之间目前不能传递Session(Cookies),所以需要安全验证的页面不要用URL方式打印,要用页面已经下载好的 ...
- php js 进度条,JavaScript实现简单动态进度条效果
这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 ...
- JS简单实现进度条效果
今天我们来学习一下,用JS来实现简单的进度条效果 首先我们先来到HTML部分 <div class="box1"></div> css部分 .box1{wi ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子--页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享-- <!DOCTYPE html&g ...
- bootstrap 滚动 进度条_bootstrap实现动态进度条效果
Bootstrap的动态进度条: html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 保存中:{{length}}% PS: ...
- 原生JS写仿淘宝搜索框(代码+效果),可实现3级搜索哦!
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
最新文章
- visualStudio创建项目过程
- 一文读懂对抗生成网络的3种模型
- docker安装mysql并实现远程访问
- linux常见协议对应端口(后期补充)
- mysql管理数据 并上传至云端_怎样将MySQL数据库上传到服务器
- Java 解析Excel(xls、xlsx两种格式)
- LAMP+LNMP(一) LAMP架构概述
- 基于JAVA+Spring+MYSQL的婚纱摄影网站
- 通过一个Thinkphp完成多个项目
- 盘点那些没用的上网小技巧-主流直播平台直播源的获取(适用potplayer)
- Arduino如何下载需要的库文件
- adb shell命令报错提示:error: no devices found 解决方法
- 07.JavaScript弹窗——alert、prompt、confirm
- python时域转频域_语音预处理(二):时域转频域
- scrapy官方中文文档
- 对短信验证码发送次数的限制
- Redis及可视化工具安装
- 第三篇,网络层的IP协议
- matlab中的向量除法
- GeneXus Beta版本已经集成区块链技术
热门文章
- 谈谈对腾讯360之争的观感
- A23_郭自强_网页前端1
- Ubuntu 安装之后无法连接网络问题
- 洛谷 P1251 餐巾计划问题 题解
- 《富爸爸穷爸爸》书摘-为什么要教授财务知识
- 【沃顿商学院学习笔记】商业基础——Financing:05 名义利率和实际利率 APR EAR
- 【Web开发】Python实现Web图表功能(D-Tale入门)
- Nature综述:宏基因组时代的病毒分类
- 彻底解决联想手机数据连接不能上网问题(无需恢复出厂设置) 本文来自移动叔叔论坛 ,详细出处请参考:http://bbs.ydss.cn/thread-201115-1-1.html
- 一次旅行:汕尾-汕头-梅州