css滚动进度条效果

CSS中的滚动进度条效果是许多网站和应用程序中常见的视觉效果之一。它可以帮助用户追踪页面的滚动进度，提高用户体验。

.scroll-progress{
position: fixed;
top: 0;
left: 0;
height: 4px;
width: 0%;
background-color: #4CAF50;
z-index: 9999;
transition: width 0.3s ease-in-out;
}

上述代码是一个简单的CSS样式，它用于创建一个滚动进度条。该样式使用了position: fixed属性，使其可以固定在页面顶部，height: 4px属性定义了进度条的高度，background-color: #4CAF50则是指定了进度条的颜色。

在使用此样式之前，需要先通过JavaScript获取页面的总高度和当前滚动位置，然后计算百分比并将其应用于进度条的宽度：

window.addEventListener('scroll', function() {
let scrollTop = window.pageYOffset;
let docHeight = document.body.offsetHeight;
let winHeight = window.innerHeight;
let scrollPercent = scrollTop / (docHeight - winHeight) * 100;
let progressWidth = scrollPercent.toFixed(2) + "%";
document.querySelector('.scroll-progress').style.width = progressWidth;
});

上述JavaScript代码创建了一个滚动事件监听器，它会在用户滚动页面时触发并计算滚动百分比。该代码通过querySelector获取滚动进度条元素，将计算得到的百分比应用到进度条的宽度中。

这是使用CSS和JavaScript创建滚动进度条效果的基本代码。通过对CSS样式进行修改，我们可以根据喜好和需求对进度条的颜色，高度等属性进行调整。除此之外，还可以在进度条上加入动画效果和其他样式，以增强整个滚动体验。

查看更多关于css滚动进度条效果的详细内容...