使用 CSS 和 JavaScript 的页面滚动进度条

滚动进度条是显示用户在页面上位置的指示器。页面顶部的滚动指示器显示页面滚动的距离。就用户界面而言，页面滚动进度条对于以图形视图显示滚动百分比非常有用。当用户向下滚动时，该栏会填充背景颜色，以指示页面滚动进度百分比效果。向上滚动页面时，进度条上显示相反的效果。

您可以使用 CSS 和 JavaScript 在网页上添加滚动进度条。为了使进度条具有吸引力，请使用与网页 UI 相匹配的背景颜色。在此示例代码片段中，我们将使用 HTML、CSS 和 JavaScript 创建页面滚动进度条。

HTML代码：

<div class="header">
    <h2>Scroll Progress Bar</h2>
    <div class="progress-container">
        <div class="progress-bar" id="proBar"></div>
    </div>  
</div>
  
<div class="body-content">
    <h3>Scroll Down to See the Progress Bar Effect</h3>
    <p>This progress bar is an indicator to show how far the page is scrolled.</p>
    <p>The progress bar effect will reverse on the <b>scroll back</b>.</p>
    <p>This Scroll Progress Bar is <b>responsive</b>! It can work on different screen sizes.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

JavaScript 代码：

// When the user scrolls the page, execute pageScroll function
window.onscroll = function() {
pageScroll();
};

function pageScroll() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("proBar").style.width = scrolled + "%";
}

CSS代码：

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
margin: 0;
}
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #f1f1f1;
}
.header h2 {
text-align: center;
}
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
.progress-bar {
height: 8px;
background: #F5011A;
width: 0%;
}
.body-content {
padding: 100px 0;
margin: 50px auto 0 auto;
width: 80%;
}