前不久我写过一篇《WordPress 顶部加载进度条代码》，是用来显示网站加载时间的，和上次的功能类似。

今天我给大家带来的是一个浏览横向进度条，随着网页向下浏览，进度条会逐渐变长。此外，它还支持自定义滚动条颜色。目前本站已经应用了该代码，效果可以直接查看本站页面。下面是代码分享：

HTML 代码

<div id="load"></div>

CSS 代码

#load {
    background-color: #ff6651;
    height: 3px;
    width: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
}

JS 代码

$(function() {
    function scroll_fn() {
        let document_height = $(document).height();
        let scroll_so_far = $(window).scrollTop();
        let window_height = $(window).height();
        let max_scroll = document_height - window_height;
        let scroll_percentage = scroll_so_far / (max_scroll / 100);
        $('#load').width(scroll_percentage + '%');
    }
    $(window).scroll(function() {
        scroll_fn();
    });
    $(window).resize(function() {
        scroll_fn();
    });
});

注意：HTML 代码需要放在 body 标签下的第一行。