Calculate diff

Question

Hellooo, here is my question, im like intermediate using js with frameworks, especially react even thought is a library and was making my portfolio web site, and was making the one from a youtube video. So the guy do this inside the useEffet function on react:

window.addEventListener('scroll',()=>{
let scrollPosition=window.pageYOffset;
let windowSize=window.innerHeight;
let bodyHeight=document.body.offsetHeight;

let diff= Math.max(bodyHeight- (scrollPosition + windowSize));

let diffP=(diff*100) / (bodyHeight- windowSize);

ref.current.style.transform=`translateY(${-diffP}%)`;
})

For a scroll effect, lot to explain hahaha, i know those functions and what they do but dont understand the math equations. I mean, what is the diff and diffP?

The tutorial is a speedrun so he doesnt explain it.

Answer 1

bodyHeight is returning the height, in pixels, of the body element (minus margin).
scrollPosition is returning the number of pixels scrolled from the top left corner along the Y axis (vertically).
windowSize returns the size, in pixels, of the physical viewing size of the screen along the Y axis.

The diff, then, is the number of pixels from the bottom of the physical screen to the bottom of the body element.

diffP is then the diff represented as a percentage (really just a float between 0.0 and 100.0) based on the difference in bodyHeight and windowSize.

Hope this breakdown helps!