主页 / 问题 / 1127075
Accepted
yaleksandr89
Asked:2020-05-17 22:27:47 +0000 UTC2020-05-17 22:27:47 +0000 UTC

如何正确实现“高级”页面滚动？

  • 772

我想不通接下来的情况。

如果在理论上，如果页面上的元素，其外观需要被跟踪（滚动事件） - 这样做。问题是，当触发一个事件来监视范围内元素的外观时，会触发另一个（类似的滚动事件），该事件又负责检查页面滚动的方向（从上到下）。而且我无法以任何方式实现，因此在元素超出范围后，只有跟踪滚动方向的函数从事件处理程序中删除

代码：一个跟踪元素是否从范围内出现/消失的函数：

var self = $(this),
    blockShow = null,
    offsetTop = settings.offsetTop,
    offsetBottom = settings.offsetBottom;

/**
 * Функция определяет, находиться элемент в области видимости или нет.
 * Дополнительно (пользовательские отспупы):
 * scrollTop - отсутп сверх
 * offsetBottom - отступ снизу
 *
 * @returns {boolean|boolean}
 */
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', function () {
        var currentScrollTop = $(this).scrollTop();
        if (currentScrollTop > lastScrollTop) {
            console.log('Прокрутка вниз');
        } else {
            console.log('Прокрутка вверх');
        }
        lastScrollTop = currentScrollTop;
    });
}

我结合了书面功能：

return $(document).on('scroll', function () {
    if (is_shown()) {
        if (blockShow === null || blockShow === false) {
            console.log('Блок ' + self.attr('class') + ' ПОЯВИЛСЯ');
            scrollTracking();
        }
        blockShow = true;
    } else {
        if (blockShow === null || blockShow === true) {
            console.log('Блок ' + self.attr('class') + ' СКРЫТ');
        }
        blockShow = false;
        //$(document).off('scroll', scrollTracking());
    }
})

实际上，会发生以下情况：当一个元素出现在作用域中时，会触发一个函数来确定滚动的方向。但是当元素超出范围时， scrollTracking(); 不会停止工作（并且应该）。

我故意将 $(document).off('scroll', scrollTracking()); 行注释掉，因为这是首先想到的 - 当元素从可见区域隐藏时 - 我删除了 scrollTracking()发挥作用，享受生活。

但实际上，不仅删除了跟踪滚动方式的函数，还删除了确定元素是否在范围内的函数。磨难的第二天 - 没有导致任何事情:(所以我只是给出一个提示。

我将不胜感激

javascript

1 个回答

  1. Best Answer

    所有这些有时对于向公众表达他们的想法很有用，在写完问题之后，再次阅读 js 中的事件变得有用。我找到了一个解决方案，简而言之 - 当在一个事件上挂起几个动作时，使用namespaces。

    事实上，当所需的块出现在范围中时，我需要将页面滚动和页面滚动分开。解决方案：

    scrollTracking() - 是

    function scrollTracking() {
    var lastScrollTop = 0;
    $(document).on('scroll', function () {
        var currentScrollTop = $(this).scrollTop();
        if (currentScrollTop > lastScrollTop) {
            console.log('Прокрутка вниз');
        } else {
            console.log('Прокрутка вверх');
        }
        lastScrollTop = currentScrollTop;
    });
}

    scrollTracking() - 变成

    function scrollTracking() {
    var lastScrollTop = 0;
    $(document).on('scroll.scrollTracking', function () {
        var currentScrollTop = $(this).scrollTop();
        if (currentScrollTop > lastScrollTop) {
            console.log('Прокрутка вниз');
        } else {
            console.log('Прокрутка вверх');
        }
        lastScrollTop = currentScrollTop;
    });
}

    和一般滚动：

    return $(document).on('scroll.isShow', function () {
                if (is_shown()) {
                    if (blockShow === null || blockShow === false) {
                        console.log('Блок ' + self.attr('class') + ' ПОЯВИЛСЯ');
                        scrollTracking();
                    }
                    blockShow = true;
                } else {
                    $(document).off('scroll.scrollTracking');
                    if (blockShow === null || blockShow === true) {
                        console.log('Блок ' + self.attr('class') + ' СКРЫТ');
                    }
                    blockShow = false;
                }
            })

    使用命名空间，我可以轻松地删除处理程序：$(document).off('scroll.scrollTracking',scrollTracking());。离开，一般，负责确定元素是否在范围内。

    • 0

相关问题