Question

我正在做运动，我遇到了一些麻烦。目标：一个进度条，显示用户到目前为止阅读的帖子数量。

问题：它开始很棒但有时它会持续到84％，有时甚至达到100％。

JS

let scroll = getClass('scroll')[0];


function checkVisible(elm) {
 let rect = elm.getBoundingClientRect();
 let viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
 return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

scroll.onscroll = function() {
 let maxId = 0;
 for(let a in json){
    maxId++;
}
let fractionOfProgress = (100/(maxId - 2)) ;    // since counts from the top, the maximum is the 18 
  for (let i = divRow.length - 1; i >= 0; i--) {
    if (checkVisible(divRow[i])) {
        progressBar.value = (divRow[i].id * fractionOfProgress);
        muchRead.innerHTML = ((divRow[i].id * fractionOfProgress) )+ "%" ;

        muchRead.style.left =  divRow[i].id * 6.8 + "px";
    }
  }

};

HTML

<div class="progress">
    <progress id="progressBar" max="100" value="0"></progress>
    <span id="muchRead"></span>
</div>

<div class="scroll">
    <div class="scroll-area"></div>
</div>

我不认为 CSS 在这个问题中很重要......

PS：我不想使用Jquery，只使用本机JS

image of the bug showing up

修改

  const json = [
        {
            "id":1,
            "title": "Lorem Ipsum is simply - 1",
            "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
            "image": "assets/item.jpg"
        },
        {
            "id":2,
            "title": "Lorem Ipsum is simply - 2",
            "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
            "image": "assets/item.jpg"
        },....

关于onscroll方法的JS Bug

0 个答案: