Javascript 跟踪元素之外的滚动位置

我正在组装一个jQuery插件。该插件将获取面板，并自动调整其高度。所以我从这样的事情开始：

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

有一个向下按钮，单击该按钮时，用户将进入下一个$（“.panel）：

有了这些，我就可以跟踪他们所使用的面板索引：

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

if（面板索引<（面板计数-1））{
指数+=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();
    }
  });

$（窗口）。滚动（函数（）{
面板。每个面板（功能（索引）{
如果（$（窗口）.scrollTop（）>$（此）.scrollTop（））{
panelIndex=指数；
//控制台日志（索引）；
}
});
if（panelIndex

---

代码检查过多，感觉有些过火。有更好的方法吗？

一个简单的优化方法是只计算一次scrollTop，并在找到匹配项时退出每个循环。您可以通过返回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();
    }
});

在

$（窗口）中，滚动（function（）

而不是窗口，尝试给出面板父div的id

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

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

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

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

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