Отслеживать положение прокрутки за пределами элементов

Question

Я собираю плагин jQuery. Плагин принимает панели и автоматически задает их высоту. Так что я начать с чем-то вроде этого:

<div class="panel">Test 1</div> 
<div class="panel">Test 2</div> 
<div class="panel">Test 3</div> 

Код, который выглядит примерно так:

sizePanels: function(){ 
     panels.each(function(){ 
     $(this).height(docHeight); 
     }); 
    }, 

Существует кнопка вниз, то при нажатии на него пользователь к следующему $ (».panel):

nextPanel: function(){ 
    $.scrollTo($(".panel:eq(" + panelIndex + ")"), 250, { easing: "swing" }); 
} 

с этим, я отслеживании индекса панели, что их на:

if (panelIndex < (panelCount - 1)) { 
     panelIndex += 1; 
    } 

Я пытаюсь выяснить способ отслеживания, если они происходят, чтобы прокручивать вручную, и передать один из элементов, чтобы затем увеличить «panelIndex», чтобы кнопка не двигала их вверх, а не вниз потому что он никогда не увеличивался должным образом из-за использования пользователем полосы прокрутки, а не кнопки. Это то, что у меня есть до сих пор:

$(window).scroll(function(){ 
    panels.each(function(index){ 
     if ($(window).scrollTop() > $(this).scrollTop()) { 
     panelIndex = index; 
     // console.log(index); 
     } 
    }); 

    if (panelIndex < panelCount - 1){ 
     s.showDownButton(); 
    } 
    }); 

Код чрезмерно проверяет и чувствует себя за бортом. есть ли лучший способ сделать это?

Answer 1

Простая оптимизация заключается в том, чтобы только вычислить scrollTop один раз и выйти из каждого цикла, когда найдено совпадение. Вы можете выйти из цикла $ .each, вернув false.

$(window).scroll(function(){ 
    var scrollTop = $(window).scrollTop(); 
    panels.each(function(index){ 
     if (scrollTop > $(this).scrollTop()) { 
      panelIndex = index; 
     } else { 
      return false; 
     } 
    }); 

    if (panelIndex < panelCount - 1){ 
     s.showDownButton(); 
    } 
}); 

Следующий способ, который я хотел бы предложить оптимизировать это заранее рассчитать scrollTop каждой панели на странице загрузки (и если видовой экран изменяется). Если вы сохраните эти значения в массиве, вы можете быстро их пропустить.

Вот некоторый грубый код, чтобы проиллюстрировать идею:

var panelTops = []; 

findPanelTops(); // calculate on load 
$(window).on("resize", findPanelTops); // calculate on resize 

function findPanelTops() { 
    panelTops = []; 
    panels.each(function(index) { 
     panelTops.push($(this).scrollTop()); 
    }); 
} 

$(window).scroll(function(){ 
    var scrollTop = $(window).scrollTop(); 
    for (var i = 0; i < panelTops.length; i++) { 
     if (scrollTop > panelTops[i]) { 
      panelIndex = i; 
     } else { 
      break; 
     } 
    }; 

    if (panelIndex < panelCount - 1){ 
     s.showDownButton(); 
    } 
}); 

события прокрутки может стрелять много и очень быстро, так что вы хотите сохранить объем вычислений как можно меньше. Один из способов обойти все это - реализовать обработчик прокрутки. Это срабатывает только тогда, когда событие прокрутки прекратилось.

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

var scrollTimeout = null; 

function onScroll() { 
    if (scrollTimeout) { 
     clearTimeout(scrollTimeout); 
    } 
    scrollTimeout = setTimeout(onScrollEnd, 500); 
} 

function onScrollEnd() { 
    // Scrolling has stopped 
    // Do stuff ... 

    scrollTimeout = null; 
} 

$(window).on("scroll", onScroll);