JSFiddle - React, Tailwind, and code Playground

HTML

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>
paragraphe sans reset
</p>
<p>
paragraphe sans reset
</p>
<p>
paragraphe sans reset
</p>
<p>
paragraphe sans reset
</p>
<p>
paragraphe sans reset
</p>

CSS

html body{
width: 100%;
margin: 0;
padding: 0;
background-size: 100% 200%;
background-image:linear-gradient(to bottom, tomato,tomato);
background-repeat:no-repeat;
transition: background 1s linear;
border:0 0 0 1px;
}
p{margin:0}

JavaScript

window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight){
document.body.style.backgroundColor = "black"
document.body.style.color = "white"
document.body.style.backgroundSize = "100% 0%"}
else{
document.body.style.backgroundColor = "white"
document.body.style.color = "black"
document.body.style.backgroundSize = "100% 200%"}
};