<h3>Scroll page!</h3>

body, html{
  padding: 0;
  margin: 0;
}
body{
  min-height: 300vh;
  transition: 1s all;
}
h3{
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 15px;
  font-size: calc(19px + 0.7vw);
  box-sizing: border-box;
  font-family: system-ui;
}

function generateRandomColor(){
  colorsHere = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
  theColorIsHere = "#";
  for(let i=0; i<6; i++){
    theColorIsHere += colorsHere[Math.floor(Math.random()*16)];
  }
  return theColorIsHere;
}
window.onscroll = function(){
  document.body.style.background = generateRandomColor();
};