javascript – 选择触及视口上边缘的元素的有效方法

2023年6月6日 183次阅读

当页面滚动时,选择触及浏览器窗口视口上边缘的元素的计算效率方法是什么？

见附图.选择绿色元素是因为它们接触顶部边缘.

UPDATE

我将如何使用它的一个例子是淡化屏幕外的元素.页面上可能有数百个.想象一下像Pinterest这样的页面.以滚动事件的速率计算数百个偏移量和scrollTop,即使节流仍然感觉效率非常低.

最佳答案 这就是我提出的.我认为可以通过缓存scrollTop值来改进它,但这非常好.我已经包含了缓存boxtops的框架,但没有包含实现代码.我也只实现了向下滚动以隐藏div.我已经把它们作为练习给你了.

当窗口滚动时,我们得到最后一个隐藏的div.我们知道这个div之前的一切都已经隐藏了.然后使用’while next element is off the screen’隐藏它.一旦div没有离开屏幕,我们就会中止.从而节省了遍历整个列表的时间.

http://jsfiddle.net/kkv3h/2/

//track whether user has scrolled up or down
var prevScrollTop = $(document).scrollTop();

$(document).scroll(function() {
    var currentScrollTop = $(this).scrollTop();
    if (currentScrollTop > prevScrollTop) {
        //down
        var lasthiddenbox = $('.fadeboxhidden:last');
        var nextbox = (lasthiddenbox.length > 0) ? lasthiddenbox.next('.fadebox') : $('.fadebox:first');
        while (nextbox.length) {
            console.log('box: ' + nextbox.offset().top + ' scroll: ' + currentScrollTop);
            if (nextbox.offset().top < currentScrollTop) {
                nextbox.animate({ opacity: 0 }, 3000).addClass('fadeboxhidden');
            }
            else { return; } 
            nextbox = nextbox.next('.fadebox:first');
        }        
    } else {
        //up          
    }
    prevScrollTop = currentScrollTop ;
});

//create an object to hold a list of box top locations
var boxtops = new Object;


//gather all boxes and store their top location
$('.fadebox').each( function(index) {    
    //you may want to dynamically generate div ids here based on index. I didn't do this
    //because i was already using the id for positioning.
    var divid = $(this).prop('id');
    boxtops[divid] = $(this).offset().top;
    //console.log(boxtops[divid]);    
});
点赞