Background-color sliding up at bottom page

Piskouille
Javascript

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

Aucune réponse