你有没有注意到，当你滚动网页时，页面顶部有一个滚动条？
此滚动条指示滚动了多少页面。
滚动位置指示器有不同的形式：垂直滚动条的变化、页面顶部或者底部的水平元素以及其他样式。
在这个片段中，我们将展示一种简单快捷的方法，借助一些 JavaScript 代码为创建滚动指示器。
使用 window.scroll 以便指示器仅在用户滚动页面时工作：
window.onscroll = function () {
let windowScroll = document.documentElement.scrollTop;
let windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrollAmount = (windowScroll/windowHeight) * 100;
document.getElementById("mybar").style.width = scrollAmount + "%";
};
使用 JavaScript 创建的滚动指示器示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #32a2a8;
}
.header h2 {
text-align: center;
}
.container {
width: 100%;
height: 10px;
background: #ccc;
}
.progress-bar {
height: 10px;
background: #005357;
width: 0%;
}
.text {
padding: 100px 0;
}
</style>
</head>
<body>
<div class="header">
<h2>Scroll Indicator</h2>
<div class="container">
<div class="progress-bar" id="mybar"></div>
</div>
</div>
<div class="text">
<p>经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。</p>
<p>经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。</p>
<p>经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。</p>
<p>经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。</p>
<p>经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。</p>
<p>经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。</p>
<p>经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。</p>
<p>经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。</p>
</div>
<script>
window.onscroll = function() {
let windowScroll = document.documentElement.scrollTop;
let windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrollAmount = (windowScroll/windowHeight) * 100;
document.getElementById("mybar").style.width = scrollAmount + "%";
};
</script>
</body>
</html>
窗口属性
Window 接口代表一个包含 DOM 文档的窗口。
document 属性指向在该窗口中加载的 DOM 文档。
window.innerHeight 属性是只读的，它获取浏览器窗口内容区域的高度，包括水平滚动条（如果呈现）。
日期：2020-06-02 22:16:14 来源：oir作者：oir