CODEWITHSUNDEEP
javascript
Namlind
Namlind

Reputation: 47

can someone please explain this simple code to ? scroll indicator

this a simple code a found in the internet to create a scroll indicator but the problem is that I don't understand the logic behind it.... why subtract max Height and inner Height and after that use the result for division , and why multiplying by 100 what is the logic behind this ? P.S. I know that : scrollHeight is to return full height of the HTMLdocument. innerHeight returns the height of the viewable window (with the scrollbar) pageYoffset is the same thing as ScrollY returns number of pixels scrolled it's a matter of why using not how to use....

const progressbar = document.querySelector('.scroll--progress');

const scroll = () => {
  // return the scroll height of the entier page
  const maxHeight = document.body.scrollHeight;
  //return the innerheight of the ViewPort
  const inner = window.innerHeight;

  const a = maxHeight - innerHeight;
  const t = Math.round(window.pageYOffset);
  const b = (window.scrollY / a) * 100;
  //setup the progress bar width
  progressbar.style.width = `${b}` + '%';
};

window.addEventListener('scroll', scroll);

Upvotes: 0

Views: 63

Answers (1)

BGPHiJACK
BGPHiJACK

Reputation: 1397

There's better cross-compatibility with the use of pageYOffset; I'd not use the scrollY unless there's a scenario that proves it useful. Rare browser-cases?

scrollY and pageYOffset are the same! But all browsers on MDN support pageYOffset.

Upvotes: 1

Related Questions