<div class="wheel">Scroll</div>
.wheel {
  width: 25rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  font-weight: bold;
}

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

* {
  font-family: Pretendard;
}

body {
  height: 500vh;
}

const $text = document.querySelector(".wheel");

addEventListener("mousewheel", e => {
  $text.innerHTML = e.deltaY > 0 ? "Scroll Down" : "Scroll Up";
  $text.innerHTML += ` ( ${window.scrollY}Y )`;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.