测量卷轴最准确的方法是什么？

Question

我正在制作一个幻灯片滚动页面，我正在尝试让它滚动，就像您拉起一张记事卡，下一张就在它后面。

为此，我将它们全部固定，然后根据滚动移动它们的 "top" 位置。但是接下来我还需要将主体设置为面板的大小。

很难描述我在做什么，所以这里是演示：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，它的 "section wipe" 功能非常接近，但是他们将前一个调高而不是将当前的调高。

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

测量卷轴最准确的方法是什么？

What's the most accurate way of measuring scroll?

javascript

jquery

scroll

scrollmagic