javascript - 为什么，当滚动页面时，当滚动到带有水平块的块时，它并不总是滚动？

Question

我刚刚创建了两个块，一个在另一个块中。外面的转了90度，里面的转了90度。

还有另一种方式是通过overflow-x hidden和jquery mousewhee插件，但是我在浏览器中使用的是平滑滚动，这样创建的水平滚动不会像网站其他部分那样滚动。

当我滚动页面并通过水平滚动到达块时，我将它置于监视器屏幕的中间。唯一的问题是这个块并不总是水平滚动，如果你用鼠标快速滚动站点，这个块就会过去。

这是代码：

    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();

标签： javascripthtmljquerycss