跟踪元素之外的滚动位置

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，并在找到匹配项时退出每个循环。 您可以通过返回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();
    }
});

滚动事件可以快速触发很多事件，因此您希望将计算量保持在最小限度。 解决所有这些问题的一种方法是实现一个scrollend处理程序。 仅在滚动事件似乎已停止时才触发。

这是执行此操作的一些基本代码。 当滚动事件停止超过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);