超简单实现WEB页面顶部阅读进度条
原创
导语
网页顶部的加载进度条非常常见，像Youtube和Github上都有见到。最近经常浏览一些文字类的网页，而在移动端的浏览器，右侧的滚动条有时会自动隐藏很不显眼，想随时知道大概还剩多少内容就比较麻烦。所以就想着在页面顶部增加一个进度条。
示例
请点击查看演示 👉 狂人日记
示例截图
实现
其实使用progress标签实现起来很简单，只需以下代码即可完成功能。
HTML
<progress id="content_progress" value="0"></progress>CSS
#content_progress {
/* Positioning */
position: fixed;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 2px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background-color: transparent;
color: #35a935;
}
#content_progress::-webkit-progress-bar {
background-color: transparent;
}
#content_progress::-webkit-progress-value {
background-color: #35a935;
}
#content_progress::-moz-progress-bar {
background-color: #35a935;
}JavaScript
document.addEventListener('DOMContentLoaded', function () {
var winHeight = window.innerHeight,
docHeight = document.documentElement.scrollHeight,
progressBar = document.querySelector('#content_progress');
progressBar.max = docHeight - winHeight;
progressBar.value = window.scrollY;
document.addEventListener('scroll', function () {
progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
progressBar.value = window.scrollY;
});
});原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录