javascript - 检查滚动点每个像素是否滚动

Question

我再次需要你的帮助。尝试编写如下代码:

我在屏幕上得到了一个以像素为单位的假想点(假设是 body 的一半)，并且我在 body 中得到了一个元素。我想在元素顶部触及假想线时发出警报，并在元素底部离开假想线时发出警报。

我有一些东西可以工作(用于击中线路)，但它只能工作几次，但如果我快速滚动它就不起作用。如果我滚动非常非常慢并且恰好出现警报:

$(window).scroll(function () {
    // A POINT I SET On SCREEN --> IN THIS CASE HALF SIZE OF BODY
    var halfBody = $("body").height() / 2;

    if ($(window).scrollTop() == halfBody) alert('HIER');
});

我认为问题在于我尝试匹配的确切像素。我认为通过滚动我并不总是精确的像素。

如何才能做到这一点，以便元素顶部越过线alert('元素顶部击中线')并且元素底部离开线alert('没有元素离开线' ); ?

希望你能理解:)

Answer 1

滚动事件很容易触发，并且处理每个事件都会使您的处理程序不知所措。 尝试使用lodash/下划线 debnounce/threshould 每 X 毫秒处理一次。 在浏览器中进行滚动处理是一种常见的做法。