scroll event

by hyeyoon

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<div>
    <h1 class="title">Scroll Down <span class="arrow">👇</span></h1>
</div>

CSS

div {
  width: 100%;
  height: 100000px;
  overflow-y: scroll;
  background: #eee;
  padding-top: 60px;
}

p {
  margin: 20px;
}

.title {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  display: inline-block;
  animation: bounce 1s infinite ease;
}

JavaScript

document.addEventListener('scroll', () => {
	const parent = document.querySelector('div');
	const child = document.createElement('p');
	child.innerHTML = "scroll event!";
	parent.appendChild(child);
})