Calculate diff | Sololearn: Learn to code for FREE!


Calculate diff

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);`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.

4/15/2022 1:19:23 AM

Alejo Nicolás Franco

1 Answer

New Answer


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!