I am currently working on a project to develop an infinite scrolling webpage with a dynamic gradient background that changes based on the user's scroll position.
While researching, I came across some code for infinite scrolling using time and date. I am looking to adapt this code to incorporate the gradient background functionality instead.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Scroll me</h1>
<script>
function populate() {
while(true) {
let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
}
}
window.addEventListener('scroll', populate);
populate(); // initialize document
</script>
</body>
</html>