CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Trying to Make a Progress Scrollbar  (Read 202 times)

AndrewTraub

  • Jr. Member
  • **
  • Posts: 80
  • Karma: +0/-0
Trying to Make a Progress Scrollbar
« on: 28 Feb 2023, 01:03:56 pm »
I'm trying to make a progress scrollbar that shows what percent of the "wrapper" element has been scrolled but am not getting it fully working. Here's the site structure:

body
   div#scrollFix
     div#fauxBody
       header#top
       div#wrapper
       footer

Here's my code so far:
Code: [Select]
{
    const scrollFix = document.getElementById("scrollFix");
    const fauxBody = document.getElementById("fauxBody");
    fauxBody.__make("div", {id: "progress-bar", placement : "afterbegin"});
    const getScrollPercentage = () => {
        const wrapper = document.getElementById("wrapper");
        const wrapperHeight = wrapper.offsetHeight;
        const wrapperTop = wrapper.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;
        const scrollPosition = scrollFix.scrollTop;

        // If the wrapper element is not in view, return 0%
        if (wrapperTop > windowHeight || wrapperTop + wrapperHeight < 0) {
            return 0;
        }

        // Calculate the percentage scrolled from the top of the wrapper element
        const scrolledFromTop = scrollPosition - wrapperTop;
        const scrollPercentage = (scrolledFromTop / wrapperHeight) * 100;

        // Return the percentage as a number rounded to 2 decimal places
        return Number(scrollPercentage.toFixed(2));
    }

    scrollFix.addEventListener("scroll", () => {
        const width = getScrollPercentage();
        const progressBarEl = document.getElementById("progress-bar");
        progressBarEl.style.width = `${width}%`;
    });
}

Any ideas?

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Trying to Make a Progress Scrollbar
« Reply #1 on: 20 Mar 2023, 10:49:49 am »
I'm not sure what you're even trying to do that a normal browser scrollbar isn't accomplishing without a single line of JavaScript.

Though you sure seem to like making a ton of "variables for nothing"
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: Trying to Make a Progress Scrollbar
« Reply #2 on: 21 Mar 2023, 02:47:49 am »
It looks to me like they want to show a percentage of how much of the page content has been scrolled rather than just using the visual browser scroll bar position.
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

 

SMF spam blocked by CleanTalk

Advertisement