javascript - scrollTop 获取每个像素

Question

当我使用函数scrollTop 获取顶部的像素数时，我收到的像素数为1、4、20...，具体取决于我滚动的速度。

$(window).scroll(function(){
    var position = $(document).scrollTop();
    console.log(position);
)};

我正在构建一个网站，我需要获取每个像素。这是因为我正在检查某个位置值何时显示。例如:

if(position === 1200){
    // do something
}

现在，对于我收到的scrollTop 函数的值来说，这是不可能的。现在我使用下面的代码可以计算每个像素，但这只有在网站不高时才能顺利工作。如果网站的高度超过 3000px，它将开始抖动，因为需要 lang 来计算像素。

var viewportFirstPosition = $(document).scrollTop();
$(window).scroll(function(){
    var inc;

    var viewportHeight = $(window).height();
    var viewportNewPosition = $(document).scrollTop();

    if(viewportNewPosition > viewportFirstPosition){
       inc=1;
    }
    else{
       inc=-1;
    }

    while(viewportFirstPosition !== viewportNewPosition){
        viewportFirstPosition += inc;
        console.log(viewportFirstPosition); // 1, 2, 3, 4, 5, ...
    }
}

有什么想法可以让我以不同的方式做到这一点吗？没有抖动:)谢谢!

Answer 1

您无法获取每个像素的scrollTop()，这是因为该函数需要一些毫秒的时间才能工作并返回值(取决于它运行的计算机) ，如果您高速滚动，它将无法检查所有像素。

我建议您将控制语句更改为以下内容:

if (position >= 1200){
    // do something
}

获取恰好 1200 像素的位置几乎是不可能的。

即使您拥有能够检测每个像素的最好的电脑，在速度较慢的设备上它也永远无法工作，因此唯一的解决方案是检查大约 1200 像素或超过 1200 像素，但不是正好 1200px。