Почему при прокрутке страницы, когда прокрутка доходит до блока с горизонтальным блоком, не всегда прокручивается?

Question

Я только что создал два блока, один внутри другого. Внешний повернут на 90 градусов, а внутренний - на 90 градусов назад.

Есть еще один способ через overflow-x hidden и jquery mousewhee plugin, но я использую плавную прокрутку в браузере и Созданная таким образом горизонтальная прокрутка не будет прокручиваться, как остальная часть сайта.

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

Вот код:

    let horizontalScroll = function () {
        if ($(window).width() > 992) {

            function chk_scroll(e) {
                let elem = $(e.currentTarget);

                if (Math.round(elem[0].scrollHeight - elem.scrollTop()) === elem.outerHeight()) {
                    return true;
                }

            }

            let windowHeight = $(window).height();

            let productsBlockFirst = $('#js-products-block-first');
            let productsBlockMainHeader = $('#js-products-block-first .products-block__main-header');
            let productsBlockFirstHeight = productsBlockFirst.innerHeight() - productsBlockMainHeader.innerHeight();
            let productsBlockFirstOffsetTop = productsBlockFirst.offset().top + productsBlockMainHeader.innerHeight();

            $('.products-block').each(function () {
                let productsBlockOutWrapper = $(this).find('.products-block__outer-wrapper');
                let productsBlockOutWrapperOffsetTop = productsBlockOutWrapper.offset().top;
                let productsBlockOutWrapperScrollTop = productsBlockOutWrapper.scrollTop();
                let productsBlockOutWrapperHeight = productsBlockOutWrapper.innerHeight();
                let productsBlockOutWrapperOffsetBottom = productsBlockOutWrapperOffsetTop + productsBlockOutWrapperHeight;
                let productsBlockOutWrapperScrollHeight = document.getElementsByClassName('products-block__outer-wrapper')[0].scrollHeight;
                let productsBlockWrapperHeight = $('.products-block__wrapper').innerHeight();


                let scrollCenter = productsBlockFirstOffsetTop - ((windowHeight - productsBlockFirstHeight) / 2);

                let iScrollPos = 0;

                let flag = false;

                productsBlockOutWrapper.scroll(function (e) {
                    let currentScroll = $(this).scrollTop();


                    if (flag === false) {
                        $('html, body').animate({
                            scrollTop: scrollCenter
                        });
                        flag = true;
                    }

                    if (currentScroll === 0) {
                        $('html, body').animate({
                            scrollTop: productsBlockOutWrapperOffsetTop - 900
                        });
                        flag = false;
                    } else if (currentScroll > iScrollPos) {
                        if (chk_scroll(e)) {
                            $('html, body').animate({
                                scrollTop: productsBlockOutWrapperOffsetTop + 800
                            });

                            flag = false;
                        }
                    }

                    iScrollPos = currentScroll;
                });
            });
        }

    }
    horizontalScroll();