自定义CSS代码：

#content_progress {
    position:fixed;
    left:0;
    top:0;
    z-index:10000;
    width:100%;
    height:2px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    background-color:transparent;
    color:#35a935
}
#content_progress::-webkit-progress-bar {
    background-color:transparent
}
#content_progress::-webkit-progress-value {
    background-color:#35a935
}
#content_progress::-moz-progress-bar {
    background-color:#35a935
}

自定义JavaScript代码：

document.addEventListener('DOMContentLoaded', function () {
      var winHeight = window.innerHeight,
            docHeight = document.documentElement.scrollHeight,
            progressBar = document.querySelector('#content_progress');
      progressBar.max = docHeight - winHeight;
      progressBar.value = window.scrollY;

      document.addEventListener('scroll', function () {
            progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
            progressBar.value = window.scrollY;
      });
});

自定义输出head头部的HTML代码：

<progress id="content_progress" value="0"></progress>

 

历史上的今天
07月
15
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。