Вопрос по javascript, ajax, scroll, scrollbar, jquery – Загрузка ajax, когда свиток достигает 80%

27

Я использую следующий код, который работает, когда полоса прокрутки достигает нижней части,

if($(window).scrollTop() == $(document).height() - $(window).height()){

Однако я хочу, чтобы Ajax срабатывал, когда я достиг 70% прокрутки, а не 100.

Исследуй больше .. Niranjan

Ваш Ответ

2   ответа
83

траницы, вы можете попробовать некоторые основные арифметические действия:

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
                                          //where 0.7 corresponds to 70% --^

Обязательно добавьте проверку, чтобы не запускать несколько одновременных запросов Ajax, если вы этого еще не сделали.

Это скорее выходит за рамки вопроса, но если вам нужен пример того, как предотвратить одновременный запуск нескольких запросов:

Объявите глобальную переменную, например,processing.

Затем включите его в свою функцию:

if (processing)
    return false;

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
    processing = true; //sets a processing AJAX request flag
    $.post("url", '<params>', function(data){ //or $.ajax, $.get, $.load etc.
        //load the content to your div
        processing = false; //resets the ajax flag once the callback concludes
    });
}

Это простой пример использования var для отслеживания того, существует ли активный Ajax-запрос для вашей функции прокрутки или нет, и это не мешает любому другому параллельному Ajax-запросу, который у вас может быть.

Редактировать:Пример JSFiddle

Обратите внимание, что использование% для измерения высоты документа может быть плохой идеей, учитывая, что высота документа будет увеличиваться при каждой загрузке чего-либо, что заставляет запрос Ajax быть относительно далеко от нижней части страницы (абсолютно по размеру).

Я бы рекомендовал использовать фиксированное значение смещения, чтобы предотвратить это (200-700 или около того):

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700){
                                 // pixels offset from screen bottom   --^

Пример:JSFiddle

Edit: Чтобы воспроизвести проблему в первом коде с процентами, загрузите 50divв это. Когда вы загружаете следующийdivэто добавит только 2% к общей высоте документа, что означает, что следующий запрос будет запущен, как только вы прокрутите эти 2% назад к 70% высоты документа. В моем фиксированном примере определенное нижнее смещение будет загружать новый контент только тогда, когда пользователь находится в определенном абсолютном диапазоне пикселей от нижней части экрана.

Этот код не эффективен. и этоwill огонь несколько раз.
Я добавил, как предотвратить запуск нескольких запросов, не вмешиваясь в возможные одновременные запросы ajax от других функций, даже если это действительно просто.
К моему ответу добавлены примеры JSFiddle, значение высоты и смещения триггера могут быть немного неправильными, но этого достаточно, чтобы иметь представление. Не стесняйтесь редактировать их, если у вас есть какие-либо вопросы.
processing Флаг будет препятствовать любому запросу Ajax, поступающему из этой функции, в то время и только во время выполнения запроса AJAX от этой функции. После завершения вызова AJAX и повторной прокрутки на 70% он снова запускается и повторяет цикл.
Предстоящие функции? Потоки? Сама функция всегда будетreturn false независимо от того, сколько раз он вызывалсяprocessing равноtrue, Это гарантирует, что одновременно запускается только один его экземпляр. Если у ОП есть предстоящие функции (что ОПРЕДЕЛЕНО в рамках вопроса), он может добавитьprocessing=false; когда вызов AJAX фактически завершается, как указано в моем комментарии в коде ответа.
11

get percentage scrolled down воспитываетэта страница в качестве первого результата (с кодом ниже, который более или менее делает то, что вы хотите). Я чувствую, что вы не пытались провести какое-либо исследование, прежде чем спросить здесь.

$(document).scroll(function(e){

    // grab the scroll amount and the window height
    var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height();

    // calculate the percentage the user has scrolled down the page
    var scrollPercent = (scrollAmount / documentHeight) * 100;

    if(scrollPercent > 50) {
        // run a function called doSomething
       doSomething();
    }

    function doSomething() { 

        // do something when a user gets 50% of the way down my page

    }

});

Похожие вопросы