mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-10-19 09:55:03 +02:00
44 lines
1.2 KiB
HTML
44 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Scroll-Activated Animations</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<h1>Titel</h1>
|
|
<div id="hier"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let generatedCount = 0;
|
|
let divElement = document.getElementById("hier");
|
|
|
|
document.addEventListener("scroll", doOnScroll);
|
|
|
|
function fillDocument() {
|
|
for (let index = 0; index < 100; index++) {
|
|
generatedCount++;
|
|
|
|
let newElement = document.createElement("h2");
|
|
newElement.innerHTML = `hallo ${generatedCount}`
|
|
divElement.appendChild(newElement);
|
|
}
|
|
}
|
|
|
|
function doOnScroll() {
|
|
if (window.innerHeight + window.scrollY + 500 > document.body.clientHeight) {
|
|
//console.log(`scrolled ${window.innerHeight} / ${window.scrollY} / ${document.body.clientHeight}`)
|
|
fillDocument();
|
|
}
|
|
}
|
|
|
|
fillDocument();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |