测量滚动的最准确方法是什么？

Question

我正在制作一个幻灯片滚动页面，我正试图让它滚动，就像你正在拉一张记录卡，然后紧接着它。

要做到这一点，我将它们全部固定，然后根据滚动移动它们的“顶部”位置。但是，我还需要使主体与面板的大小相同。

很难描述我正在做什么，所以这里是演示：https://codepen.io/NotDan/pen/vzraJE这是导致我的问题的特定代码片段：

//what's going on here?
$(window).scroll(function(){
  var panelNum = parseInt($(window).scrollTop()/$(window).height());//detemines panel number
  var pixelMovement = ($(window).scrollTop())-(panelNum*$(".panel").height()); determines how many pixels to move the panel by
  $('body').find(".panel:eq("+panelNum+")").css("top", -1*pixelMovement); 
});

问题是当用户快速滚动时，顶部位置没有准确设置并且有一些悬垂。再次，很难解释，但如果你跳到演示并快速滚动，你会看到我的意思。

有更精确的卷轴测量方法吗？或者有更好的方法来做我想做的事情吗？我已经尝试过scrollmagic，它的“部分擦除”功能非常接近，但是它们会将前一个功能提升，而不是将当前的功能提升。

Answer 1

我尝试制定一个条件来确定面板编号，一切都开始工作了。

var panelNum = 0;
var pixelMovement = 0;
$(window).scroll(function () {
    pixelMovement = $(window).scrollTop() - panelNum * $(".panel").height(); // determines how many pixels to move the panel by 
    $("body")
        .find(".panel:eq(" + panelNum + ")")
        .css("top", -1 * pixelMovement);
    if (Math.abs(pixelMovement) >= $(window).height()) {
        panelNum++;
    } else if (pixelMovement <= 0) {
        panelNum--;
    }
});

这是工作演示：https://codepen.io/NotDan/pen/RYJeZq