Как обеспечить, чтобы событие mousewheel/wheel срабатывало только один раз за прокрутку внутри прокручиваемого div

Я использую pagePiling.js для создания эффекта прокрутки одной страницы. В одном из разделов компоновки страниц у меня есть дочерний элемент div, который можно прокручивать. Когда пользователь попадает в раздел с прокручиваемым div внутри него, я бы хотел, чтобы он мог прокручивать вверх каждого абзаца внутри прокручиваемого div каждый раз, когда они прокручивают вниз с помощью колесика мыши.

Проблема здесь в том, что событие mousewheel/wheel срабатывает 2 раза, 4 раза, 12 раз или даже 21 раз, когда я перемещаю колесико мыши на один «тик» (из-за отсутствия лучшего термина), но мне бы хотелось, чтобы это огонь один раз. В противном случае мои функции срабатывают слишком часто и плохо прокручиваются. Количество событий колеса начинает прыгать, когда я прокручиваю конкретно внутри прокручиваемого контейнера или когда я прыгаю назад и вперед между разделами и снова пытаюсь прокрутить прокручиваемый контейнер.

До сих пор я пытался реализовать lodash.js и методы debounce/throttle с помощью addEventListener() в прошлом, но я все еще получаю несколько событий мыши после одного щелчка колесика, подобно тому, что я описал выше.

Я создал codepen здесь, чтобы показать, что у меня получилось. Моя проблема начинается с функции наведения мыши, вот с чем я работал до сих пор:

$('.overflow-section').on('wheel', function(e) {
    var oEvent = e.originalEvent,
    delta  = oEvent.deltaY || oEvent.wheelDelta;
    if (delta > 0) {
        $('#scrollable-container').animate({
            scrollTop: $("#section-two").offset().top
        });
    } else {
        $('#scrollable-container').animate({
            scrollTop: $("#section-one")
        });
    }
});

Как только я прокручиваю до нижней части, консоль выводит 6 событий колеса, когда я отмечаю колесо один раз, но оно должно срабатывать только один раз.