Link of website: https://revelation2k24.com/

Hare Krishna,

Iam trying to implement scrollBar under timeline section in this website. Iam trying to implement using intersection observer api but only able to implement scrollBar in the forward direction and that to not perfectly as intersection observer stops to listen before the scrollBar reaches 100% height as all the list items are already 100% on viewport before window scroll reaches the end of list. I also tried to implement the solution by dynamically updating the scrollBar using window scroll bar but i was not able to do it. May be iam missing some logic or this problem cannot be solved using intersection observer api. It would be nice if someone would help me to implement this scollBar.

Javascript Code

const bar=document.querySelector(".prog");
const imgList=document.querySelectorAll(".inn");
const contain=document.querySelector(".contain");
const progBar=document.querySelector(".prog");
const circleBar=document.querySelector(".ball");
let navBar=document.querySelector(".nav");


const option={
    
    root:null,
    threshold: [0,1],
    rootMargin:"-150px"
    
};

let i=0;
let oldScrollValue=0;
function callBack(entries){
   
   entries.forEach((entry)=>{
    
    let scroll_direction;
    let newScrollValue=window.scrollY;
    if(newScrollValue>oldScrollValue)
        {
            scroll_direction="down"
        }
        else{
            scroll_direction="up"
        }
            oldScrollValue=newScrollValue;
    
       if(entry.isIntersecting &&  Number(progBar.style.height.replace("%",""))<=97 && 
            scroll_direction=="down")
        {
                let height="";
                 height=parseFloat(progBar.style.height)/100;
                 let newHeight=(height+0.06)*100+"%";
                progBar.setAttribute("style",`height:${newHeight}`);
               
         }
            
})

}

const barObserver=new IntersectionObserver(callBack,option);
imgList.forEach((img,i)=> barObserver.observe(img));

For refering whole code: CodePen Link

Note: As whole question with html,css and javascript excedded 30k words so i only gave javascript code here and whole code is in codePen. Please run this code in vscode