Как запустить функцию jQuery при прокрутке вверх страницы - PullRequest
Новая
       1

Как запустить функцию jQuery при прокрутке вверх страницы

0 голосов
/ 04 мая 2011

Я не уверен, возможно ли это, но я пытаюсь добавить функцию, подобную Facebook-приложению, на мою веб-страницу, чтобы при прокрутке за верхнюю часть страницы она обновлялась асинхронно.

Все, что мне нужно, - это способ использования javasript / jquery / whateverelsewillwork для определения того, когда пользователь прокручивает вверх, даже если полоса прокрутки уже находится вверху страницы.

С уважением,

Тейлор

1 Ответ

3 голосов
/ 04 мая 2011

Если вы хотите это сделать, это возможно. Все, что вам нужно сделать, это подключиться к событиям документа и выполнить некоторые особые проверки. Он был протестирован только на Chrome и IE9, я позволю вам сделать все остальное.

Если хотите, вместо этого вы можете использовать существующий плагин jQuery mousewheel, чтобы облегчить себе жизнь. Это должно быть более надежным, если плагин обновляется. 

$(function(){
    //This variable is used to prevent event flooding
    var preventRefire = false;

    //Bind all possible events
    $(document).bind("DOMMouseScroll mousewheel scroll keyup",function(event){
        //If an event was fired recently, return
        if(preventRefire) return;

        if(event.type == "keyup"){
            //If key is not up arrow or page up, return
            if(event.which != 38 && event.which != 33) return;

            //If an input field is focused, don't fire, return
            if($('input:focus,textarea:focus').length != 0) return;
        }

        if(event.type == "mousewheel" || event.type == "DOMMouseScroll"){
            //Guess scroll direction
            var deltaY = 0;
            if(event.wheelDelta) deltaY = event.wheelDelta;
            if(event.detail) deltaY = -event.detail;

            //If user mousewheeled down, don't fire, return
            if(deltaY <= 0) return;
        }

        //Finally, are we at the top?
        if($(document).scrollTop() == 0){
            //Prevent event to refire within 2 seconds
            preventRefire = true;
            setTimeout(function(){ preventRefire = false; }, 2000);

            //This is where you do your stuff
        }
    });
});

Вы можете попробовать живую демонстрацию здесь: http://jsfiddle.net/34p6B/2/

Проблемы:

Это несколько надёжно, просто пару вещей для размышления.

Он не был протестирован на мобильном устройстве, но с привязкой к событию прокрутки все должно быть в порядке.

Из-за всплытия событий события mousescroll будут запускаться для других элементов. Например, если у вас есть прокручиваемый контент в текстовой области или элемент AND , вы находитесь в верхней части страницы, он WILL срабатывает, если вы прокручиваете внутренний контент вверх, даже если он не должен считаться «перезаписью» на самом документе. В этих случаях вы можете использовать event.stopPropagation() для события mousewheel прокручиваемых элементов, чтобы предотвратить это поведение.

...