Как использовать эту функцию в JQuery

Question

У меня есть следующая функция JQuery, которая, как предполагается, чтобы обнаружить, когда первый элемент прокручивается в поле зрения на странице:

function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

Мой разум месиво сегодня ... как я могу использовать эту функцию?

Предположим, я хочу определить, когда появляется $('.guardrail360').

Answer 1

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

$(window).scroll(function() { 
    isScrolledIntoView('.guardrail360'); 
}); 

Answer 2

if (isScrolledIntoView('.guardrail360')) { 

} 

Как было предложено другими ответами, вы должны использовать действие по адресу $(window).scroll(). Кроме того, для того, чтобы сделать, если заявление запускается в первый раз элемент прокручивается в поле зрения, я создал эту run_once функции для вас:

$('window').on('scroll', function() { 

    if (isScrolledIntoView('.guardrail360')) run_once(function() { 
      // ... 
    }); 

}); 

function run_once(callback) { 

    var done = false; 

    return function() { 

     if (!done) { 

      done = true; 

      return callback.apply(this, arguments); 

     } 

    }; 

} 

Answer 3

Существует несколько способов сделать это. Просто не используйте наивную реализацию window.scroll, если вы заинтересованы в опыте пользователя и/или производительности.

Это очень, очень и плохая идея приложить обработчики к окну прокрутки события. В зависимости от браузера событие прокрутки может запускать много, а ввод кода в обратном вызове прокрутки замедлит любые попытки прокрутить страницу (не очень хорошая идея). Любое ухудшение производительности в обработчике прокрутки приведет к тому, что общая производительность прокрутки составит всего лишь. Вместо этого гораздо лучше использовать ту или иную форму таймера для проверки каждые X миллисекунд или для присоединения события прокрутки, а запускает ваш код только после задержки (или даже после заданного количества исполнений - и затем задержка).

-John Resig, создатель JQuery, на ejohn.org

Способ 1: setInterval

Во-первых, наивный подход с использованием таймеров:

var $el = $('.guardrail360'); 

var timer = setInterval(function() { 
    if (isScrolledIntoView($el)) { 
     // do stuff 

     // to run this block only once, simply uncomment the next line: 
     //clearInterval(timer); 
    } 
}, 150); 

Метод 2: окно. scroll event

Тогда есть тривиальный, но сумасшедший неэффективен way с помощью события прокрутки (в зависимости от браузера событие прокрутки будет срабатывать сотни раз в секунду, поэтому вы НЕ хотите запускать много кода здесь, особенно не код, который запускает переходы/перерисовки браузера).

Когда-либо посещал сайт, где прокрутка страницы казалась вялой и нервной?Это часто вызывается кусок кода, как этот прямо здесь:

var $el = $('.guardrail360'); 

$(window).on('scroll', function() { 
    if (isScrolledIntoView($el)) { 
     // do stuff 
    } 
}); 

Способ 3: лучшее из обоих миров

щегольской гибридный подход для высоких местах движения, как это было предложено Резиг в aforementioned blog post :

var $el = $('.guardrail360'), 
    didScroll = false; 

$(window).scroll(function() { 
    didScroll = true; 
}); 

var timer = setInterval(function() { 
    if (didScroll) { 
     didScroll = false; 
     if (isScrolledIntoView($el)) { 
      // do stuff 

      // to run this block only once, simply uncomment the next line: 
      //clearInterval(timer); 
     } 
    } 
}, 250); 

Метод 4: Дроссельный/дребезг

дросселирования (минимум N миллисекунд между вызовами) или дребезгом (только один invocatio n на «всплеск») также могут использоваться для эффективного ограничения скорости, с которой выполняется ваш внутренний код. Предполагая, что вы хотите использовать Ben Alman's jQuery throttle/debounce plugin, код выглядит следующим образом:

var $el = $('.guardrail360'); 

// Throttling 
$(window).on('scroll', $.throttle(250, function(){ 
    if (isScrolledIntoView($el)) { 
     // do stuff 
    } 
})); 

// Debouncing 
$(window).on('scroll', $.debounce(250, function(){ 
    if (isScrolledIntoView($el)) { 
     // do stuff 
    } 
})); 

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