主页 / 问题 / 1127385
Accepted
yaleksandr89
Asked:2020-05-18 16:25:28 +0000 UTC2020-05-18 16:25:28 +0000 UTC

向上滚动页面时如何摆脱单个事件触发（向下滚动）？

  • 772

在跟踪页面上下滚动时，我就是无法摆脱一个侧柱。简而言之，当一个块出现在页面范围内时。

*检查块是否出现在范围内的功能。

function is_shown() {
    /**
     * @var wt - windows scrollTop
     * @var wh - windows height
     * @var et - target element
     * @var eh - element height
     */
    var wt = parseFloat($(window).scrollTop().toFixed()),
        wh = parseFloat($(window).height().toFixed()),
        et = parseFloat(self.offset().top.toFixed()),
        eh = parseFloat(self.outerHeight().toFixed());
    return (wt + wh) - offsetTop >= et && (wt + wh - eh * 2) <= et + (wh - eh) - offsetBottom;
}

启动一个事件处理程序来跟踪页面的滚动方式：

function scrollTracking() {
    var lastScrollTop = 0;
    $(document).on('scroll.scrollTracking', function () {
        var currentScrollTop = $(this).scrollTop();
        if (currentScrollTop > lastScrollTop) {
            console.log('Прокрутка вниз');
            // здесь "магия" при прокрутке ВНИЗ
        } else {
            console.log('Прокрутка вверх');
            // здесь "магия" при прокрутке ВВЕРХ
        }
        lastScrollTop = currentScrollTop;
    });
}

is_shown()之间的交互作用scrollTracking()如下：

return $(document).on('scroll.isShow', function () {
    if (is_shown()) {
        if (blockShow === null || blockShow === false) {
            scrollTracking();
        }
        blockShow = true;
    } else {
        if (blockShow === null || blockShow === true) {
            $(document).off('scroll.scrollTracking');
        }
        blockShow = false;
    }
})

所有这些都有效，但只有一个门框。向下滚动页面时，一切正常，即当对象出现在范围内时，scrollTracking()，而当对象从范围内消失时，处理程序被移除$(document).off('scroll.scrollTracking')。

但是，如果您向上滚动页面，则向下滚动一次，然后向上滚动开始工作。

有点乱，本来想插个gif的，但是尺寸不合适，就想办法搞清楚在屏幕上工作的过程。

在此处输入图像描述

我知道里面的支票里面有问题scrollTracking()，但我不知道如何更改支票:(

如何纠正这种行为？

javascript

1 个回答

  1. Best Answer

    Stackoverflow 创造奇迹:) 我写了我的问题，之后我自己解决了)))

    如上所述，问题出在检查中，通过scrollTracking()添加标志并扩展条件来执行检查，之后一切都开始正常工作。

    *已更正scrollTracking()

    function scrollTracking() {
    var lastScrollTop = 0,
        startScroll = false;
    $(document).on('scroll.scrollTracking', function () {
        var currentScrollTop = $(this).scrollTop();
        if (startScroll === false) {
            startScroll = true;
        } else if (startScroll === true && currentScrollTop > lastScrollTop) {
            console.log('Прокрутка вниз');
            // здесь "магия" при прокрутке ВНИЗ
            startScroll = false;
        } else if (startScroll === true && currentScrollTop < lastScrollTop) {
            console.log('Прокрутка вверх');
            // здесь "магия" при прокрутке ВВЕРХ
            startScroll = false;
        }
        lastScrollTop = currentScrollTop;
    });
}
    • 0

相关问题