如何计算文档高度并向div添加宽度将显示多页

Question

i want to add width to my div by the how much page height is so it can show how much page is left if page scrolled to bottom div width should be 100% and if it at middle it should be half

window.onscroll = function () {
    addLoaderWidth();
}

function addLoaderWidth() {
    var addWidth = window.pageYOffset;
    document.getElementById('load').style.width = addWidth + 'px';

}

Answer 1

Your javascript works just fine. I had to add some style for the #load element, and add a container around the element that was scrollable. But it seems to work as expected:

 window.onscroll = function () { addLoaderWidth(); } function addLoaderWidth() { var addWidth = window.pageYOffset; document.getElementById('load').style.width = addWidth + 'px'; } 

 #load { height: 10px; width: 0px; background-color: blue; position: fixed; top: 0; left: 0; transition: all .2s ease; } .container { height: 1000px; position: relative; } 

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

Answer 2

You can do this by calculating the percentage that was scrolled down and use that value as the width of the element.

 const progress = document.getElementById('progress'); window.addEventListener('scroll', function() { let d = document.documentElement, b = document.body; let percentage = (d.scrollTop||b.scrollTop) / ((d.scrollHeight||b.scrollHeight) - d.clientHeight) * 100; progress.style.width = percentage + '%'; }); 

 #progress { position: fixed; top: 0; left: 0; height: 8px; width: 0%; background-color: #48E; } #content { height: 2000px; } 

 <div id="progress"></div> <div id="content"></div>