Cannot understand how to build this scrollBar using Intersection observer api

Website Link: revelation2k24

Hare Krishna,

Iam trying to implement vertical progress bar under timeline section in the website above. Iam trying to implement using intersection observer api but only able to implement progress bar in the forward direction and that to not perfectly as intersection observer stops to listen before the progress bar 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 progress bar 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 progress bar.

Problem statement summary: I want to build a cosmetic slider that fills a vertical progress bar and goes up/down with scroll

For refering whole code: Codepen

Note: Please run this code in vscode as codepen live server doesnot exactly matches with vscode live server output.

hello and welcome back to fcc forum :slight_smile:

  • have you tried making this “100%” here in this snippet? Number(progBar.style.height.replace("%",""))<=97
  • i dont see any “progress bar”!!

happy coding :slight_smile: