Как я могу заставить мою функцию горизонтальной прокрутки срабатывать в обратном направлении?

Question

Моя цель здесь - прокрутить страницу, когда элемент горизонтальной прокрутки попадает в верхнюю часть окна, он останавливает вертикальную прокрутку и прокручивает содержимое элемента горизонтальной прокрутки. Когда достигнут конец этого элемента, возобновляется вертикальная прокрутка. Прекрасно работает при прокрутке страницы, не так много при прокрутке вверх. Я усовершенствовал код несколько раз, и я нахожусь в точке, где мой мозг поворачивается к му sh от того, чтобы смотреть на него так долго. Любая помощь приветствуется!

Вот мой код:

jQuery(function($){
    var hitGall = false,
        hasFired = false;
    $(window).on('mousewheel', function(event){
        // scrolling down
        if(event.originalEvent.wheelDelta < 0 && $(window).scrollTop() >= $('#gallery-scroll-banner').offset().top && !hasFired){
            if(!hitGall) {
                $('body').css('overflow', 'hidden');
                hitGall = true;
            }
            var currentScrollLeft = $('#gallery-scroll-banner').scrollLeft();
            $('#gallery-scroll-banner').scrollLeft(currentScrollLeft-(event.originalEvent.wheelDelta*.2));
            setTimeout( function() {
                var newScroll = $('#gallery-scroll-banner').scrollLeft(),
                    scrollWidth = $('#gallery-scroll-banner').get(0).scrollWidth;
                if(scrollWidth - newScroll == $('#gallery-scroll-banner').outerWidth()){
                    $('body').css('overflow', 'visible');
                    hitGall = false;
                    hasFired = true;
                }
            }, 500);
            if($(window).scrollTop() >= ($('#gallery-scroll-banner').offset().top + $('#gallery-scroll-banner').height())) hitGall = hasFired = false;
        }
        //scrolling up
        if(event.originalEvent.wheelDelta > 0 && $(window).scrollTop() >= $('#gallery-scroll-banner').offset().top && !hasFired){
            if(!hitGall) {
                $('body').css('overflow', 'hidden');
                hitGall = true;
            }
            var currentScrollLeft = $('#gallery-scroll-banner').scrollLeft();
            $('#gallery-scroll-banner').scrollLeft(currentScrollLeft-(event.originalEvent.wheelDelta*.2));
            setTimeout( function() {
                var newScroll = $('#gallery-scroll-banner').scrollLeft(),
                    scrollWidth = $('#gallery-scroll-banner').get(0).scrollWidth;
                if($('#gallery-scroll-banner').get(0).scrollWidth > $('#gallery-scroll-banner').innerWidth()){
                    $('body').css('overflow', 'visible');
                    hitGall = false;
                    hasFired = true;
                }
            }, 500);
            if($(window).scrollTop() >= ($('#gallery-scroll-banner').offset().top + $('#gallery-scroll-banner').height())) hitGall = hasFired = false;
        }
    });
});

Вот соответствующий CSS:

#gallery-scroll-banner {
    width: 100vw;
    overflow: hidden;
}
#gallery-scroll-banner-inner {
    display: inline-block;
    white-space: nowrap;
    padding: 120px 20px;
    text-align: center;
    color: #FFF;
    background: #0a2a69;
}