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

Question

Никак не могу избавиться от одного косяка при отслеживание прокрутки вверх и вниз страницы. Вкратце, при появление блока в области видимости страницы.

*функция проверки появился блок в области видимости или нет.

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').

Но если скролить страницу вверх, однократно срабатывает прокрутка вниз и потом уже начинает работать прокрутка вверх.

Немного сумбурно, хотел вставить гиф, но не влезаю по размеру, поэтому постараюст изобрать процесс работы на скрине.

Понимаю, что косяк в проверке внутри scrollTracking(), но как изменить проверку не знаю :(

Как можно исправить такое поведение?

Answer 1

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

БЛОГ НА HUSL

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

Ответы (1 шт):