1. 滚动进度条概述
滚动进度条是指在页面滚动时，对指定内容滚动进度进行展示的一种效果。该效果常用于文章阅读、页面导航等场景，能够提高用户体验。
下面介绍几种使用纯CSS实现滚动进度条的技巧。
2. 定义进度条样式
为了实现滚动进度条效果，需要首先定义进度条样式。可以使用CSS中的伪元素::before或::after来实现。以下示例使用::before实现水平进度条样式：
/* 定义进度条样式 */
.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #ddd;
}
.progress-bar::before {
content: "";
display: block;
height: 100%;
background-color: #007bff;
transition: width .2s ease-in-out;
}
以上代码中，通过::before创建了一个高度为100%、背景色为蓝色的元素，用于表示进度条。在.progress-bar中设置了position: fixed;，使进度条可以固定在页面顶部。
3. 监听滚动事件
接下来，需要监听页面滚动事件，根据当前滚动位置计算出进度条展示的百分比。可以使用JavaScript来实现，以下示例使用jQuery：
$(document).ready(function() {
/* 监听滚动事件 */
$(window).scroll(function() {
/* 计算进度条展示的百分比 */
var scrollPercent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;
/* 更新进度条宽度 */
$('.progress-bar').find('::before').css('width', scrollPercent + '%');
});
});
以上代码中，$(window).scroll()用于监听滚动事件，$(window).scrollTop()用于获取当前滚动位置，$(document).height()和$(window).height()用于获取页面总高度和可视区域高度。最后根据计算出的百分比更新进度条宽度。
4. 优化性能
如果页面中存在大量图片或其他资源，滚动时计算进度条展示的百分比可能会影响性能，导致页面卡顿。以下是一些优化性能的技巧：
4.1 使用节流函数
可以使用节流函数来减少计算次数，优化性能。以下示例使用lodash库中的throttle函数：
$(document).ready(function() {
/* 定义节流函数 */
var throttle = _.throttle(function() {
/* 计算进度条展示的百分比 */
var scrollPercent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;
/* 更新进度条宽度 */
$('.progress-bar').find('::before').css('width', scrollPercent + '%');
}, 200);
/* 监听滚动事件 */
$(window).scroll(throttle);
});
以上代码中，_.throttle()用于定义节流函数，200表示间隔时间为200毫秒。节流函数将在指定的时间内最多执行一次。
4.2 延迟加载
可以将在进度条初始位置以下的图片或其他资源进行延迟加载，减少初始页面加载时间。以下示例使用jQuery LazyLoad插件实现图片延迟加载：
$(document).ready(function() {
/* 监听滚动事件 */
$(window).scroll(function() {
/* 计算进度条展示的百分比 */
var scrollPercent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;
/* 更新进度条宽度 */
$('.progress-bar').find('::before').css('width', scrollPercent + '%');
/* 延迟加载图片 */
$("img.lazy").lazyload();
});
});
以上代码中，使用.lazy()函数来延迟加载图片，该函数会在图片进入可视区域时才加载。
4.3 使用CSS预加载
可以使用CSS预加载来提高页面性能。以下是预加载进度条样式的示例：
/* 预加载进度条样式 */
.progress-bar.loaded::before {
width: 100%;
}
以上代码中，将.progress-bar.loaded::before的宽度设置为100%，表示加载完成。在页面加载完成后，使用jQuery为进度条添加.loaded类：
$(window).on('load', function() {
/* 添加.loaded类 */
$('.progress-bar').addClass('loaded');
});
以上代码中，使用$(window).on('load')来监听页面加载完成事件，在页面加载完成后添加.loaded类，表示进度条已经加载完成。
5. 总结
以上是使用纯CSS实现滚动进度条效果的几种技巧。通过定义进度条样式、监听滚动事件、优化性能等方式，可以为页面增加更好的用户体验。