如果元素在视口中 – 停止滚动动画

嗨，我按照教程： http ： //css-tricks.com/slide-in-as-you-scroll-down-boxes/

它工作得很好，但是，当一个元素已经在视口中时（如果浏览器很小并且页面被加载），则jQuery不会将CLASS添加到转换，直到AFTER滚动。

有没有办法在加载时检查元素是否已经在视口中，然后添加一个“已经查看过的”类？

Answer 1

尝试

var viewed = Array.prototype.map.call(document.querySelectorAll("body *") , function (el, i) { return (el.getBoundingClientRect().bottom <= window.innerHeight && el.getBoundingClientRect().left <= window.innerWidth) && $(el).addClass("already-viewed") && el }).filter(Boolean); 

 $(document).ready(function () { var body = $("body"); $.each(new Array(180), function () { body.append( $("")) }); var viewed = Array.prototype.map.call(document.querySelectorAll("body *"), function (el, i) { return (el.getBoundingClientRect().bottom <= window.innerHeight && el.getBoundingClientRect().left <= window.innerWidth) && $(el).addClass("already-viewed") && el }).filter(Boolean); body .append("total images: " + $("img").length + ", already viewed: " + $(".already-viewed").length); console.log(viewed.length, $(viewed)) }); 

 body { width : 1000px; height : 1000px; } img { width : 50px; height : 50px; background : navy; } .already-viewed { outline:0.15em solid red; }