Question

我需要你的帮助。尝试编写类似这样的代码：

我在屏幕上有一个想象点像素（让我们说一半的身体），我有一个身体元素。如果元素TOP击中假想线，我想发出警报，并警告元素底部是否离开假想线。

我得到了一些工作（用于击中线），但它只能工作几次，但如果我快速滚动它就不起作用。如果我滚动非常慢并且出现警报：

$(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('element top hits the line')行，元素底部离开第alert('no element leaving the line');行？

我希望你明白：）

Answer 1

滚动事件触发得很开心，处理每个事件甚至会压倒你的处理程序。尝试使用lodash / underscore debnounce / threshould每X毫秒处理一次。在浏览器中滚动处理是一种常见做法。

Answer 2

好的，我找到了一个很好的解决方案，包括缓存变量和设置超时：

var timer;  
var windowHeight = $(window).height();  
var triggerHeight = 0.5 * windowHeight;


$(window).scroll(function() {
    if(timer) {
        window.clearTimeout(timer);
    }

    timer = window.setTimeout(function() {

        // this variable changes between callbacks, so we can't cache it
        var y = $(window).scrollTop() ;

        if(y > triggerHeight) {

        }           


        if( $(window).scrollTop() == 0 ) { // IF HITS TOP OF PAGE

        }

    }, 10);
});

也许对某人有帮助！

检查每个像素滚动的滚动点

2 个答案: