Background-color sliding up at bottom page

Bonjour à toutes et tous,

J'essaye de créer une petite animation de mon background-color quand le scroll butte sur la fin de la page. J'arrive à changer la couleur mais j'ai un soucis avec l'effet sliding up. J'ai essayé avec background-image:linear-gradient mais sans succès. Voici le code : CSS/Javascript

html body{ width: 100%; margin: 0; padding: 0; background-size: 100% 200%; transition: background 1s linear; } window.onscroll = function(ev) { if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight{ document.body.style.backgroundColor = "black" document.body.style.color = "white"} else{ document.body.style.backgroundColor = "white" document.body.style.color = "black"} };

Aussi, si vous pouvez m'expliquer pourquoi le changement de couleur s'effectue un peu avant de butter sur la fin de page (j'ai l'impression que ça dépend des navigateurs ...) ce serait cool :)

bon confinement