跟蹤滾動位置超出元素

我正在拼湊一個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(); 
    } 
    });

該代碼過度檢查和感覺有點過度。有沒有更好的方法來做到這一點？

來源

2012-05-15 user577808

在'$（窗口）.scroll（函數（）'，而不是** **窗口嘗試給面板父DIV – Imdad

一個簡單的優化是隻計算一次scrollTop並在找到匹配項時退出每個循環。您可以通過返回false來退出$ .each循環。

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

scroll事件可以觸發了很多，非常快，所以你要保持計算量儘可能小。解決所有這些問題的一種方法是實現滾動處理程序。這隻會在滾動事件似乎停止時觸發。

這是一些基本的代碼。當滾動事件已經停止超過500ms的時候，就會觸發：

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

來源

2012-05-15 05:03:48

的ID非常棒的信息。謝謝Nick！ – user577808

跟蹤滾動位置超出元素

回答

相關問題