Calculate diff | Sololearn: Learn to code for FREE!

0

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

4/15/2022 1:19:23 AM

Alejo Nicolás Franco

1 Answer

New 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!