<p class="cta">Scroll me</p>

<div class="event-counter">
  <div class="box">
    <p>Number of scroll events</p>
    <span class="output">0</span>
  </div>
</div>
body {
  height: 5000vh;
  font-family: sans-serif;
  line-height: 1.5;
  color: #212121;
  background-color: #f5f5f5;
}

.cta {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.cta::before,
.cta::after {
  content: "\2193";
  margin-left: 4px;
  margin-right: 4px;
}

.event-counter {
  position: sticky;
  top: 100px;
  display: flex;
  justify-content: center;
}

.box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border: 1px solid #03a9f4;
  border-radius: 4px;
}

.event-counter p {
  margin: 0;
  font-size: 16px;
}

.event-counter span {
  font-size: 48px;
  font-family: monospace;
}

const output = document.querySelector(".output");
let scrollEventCounter = 0;

document.addEventListener("scroll", () => {
  scrollEventCounter += 1;
  output.textContent = scrollEventCounter;
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.