Как вызвать событие scroll у страницы, которая не имеет полосы прокрутки?

Хочу сделать сайт с пролистыванием слайдов при скролле как здесь, но когда пытаюсь добавить событие scroll к странице, то оно не работает, т.к. нет полосы прокрутки, ведь у меня везде стоит overflow: hidden.

JS

"use strict";

class ScrollAnimate {
    constructor(slides, listDots) {
        this.slides = slides;
        this.listDots = listDots;
        this.numActiveSlide = 0;
    }

    createDots() {
        for (let i = 0; i < this.slides.length; i++) {
            const dot = document.createElement("li");

            dot.classList.add("dot");

            if (i === this.numActiveSlide) {
                dot.classList.add("dot--active");
            }

            this.listDots.appendChild(dot);
        }
    }

    addActiveClass() {
        this.slides[this.numActiveSlide].classList.add("slide--active");
    }

    removeActiveClass() {
        this.slides.forEach((slide) => slide.classList.remove("slide--active"));
    }

    scroll() {
        window.addEventListener("scroll", (e) => {
            console.log(e);
        });
    }

    init() {
        window.addEventListener("load", (e) => {
            this.createDots();
            this.addActiveClass();
            this.scroll();
        });
    }
}

const slides = document.querySelectorAll(".slide");
const listDots = document.querySelector(".dots");

new ScrollAnimate(slides, listDots).init();

CSS

*,
*::after,
*::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style-type: none;
    resize: none;
    outline: none;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    height: 100vh;
    overflow: hidden;
}

.sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 15%;
    height: 100vh;
    z-index: 99999;
    background: rgba(0, 0, 0, .1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.dots {
    display: flex;
    flex-direction: column;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c2c2c2;
    transition: .3s;
}

.dot--active {
    background: #000000;
}

.dot:not(:last-child) {
    margin-bottom: 3px;
}

.slides {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.slide {
    height: 100vh;
    justify-content: center;
    align-items: center;
    color: #000000;
    background: #fefefe;
    opacity: 0;
    display: flex;
    transition: background, opacity, .3s;
}

.slide--active {
    opacity: 1;
}

.slide--active > .slide__title {
    transform: translateY(0);
}

.slide--black {
    color: #ffffff;
    background: #222222;
}

.slide--blue {
    color: #ffffff;
    background: #318CE7;
}

.slide--yellow {
    color: #ffffff;
    background: #F4CA16;
}

.slide__title {
    transition: color, transform, .3s;
    font-size: 40px;
    font-family: "Roboto", sans-serif;
    transform: translateY(-25px);
}

HTML

  <div class="wrapper">
    <main class="main">
      <ul class="slides">
        <li class="slide slide--black">
          <h1 class="slide__title">Slide 1</h1>
        </li>
        <li class="slide slide--yellow">
          <h1 class="slide__title">Slide 2</h1>
        </li>
      </ul>
    </main>
    <aside class="sidebar">
      <ul class="dots"></ul>
    </aside>
  </div>