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

Posted 2023-03-06

【中文标题】如果元素在视口中 - 停止滚动动画

【英文标题】：If element is in viewport- stop scroll animation

【发布时间】：2015-04-08 11:40:08

【问题描述】：

您好，我学习了一个教程：http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

它工作得很好，但是，当一个元素已经在视口中时（比如如果浏览器很小并且页面已经加载），那么 jQuery 不会添加 CLASS 以进行转换，直到滚动之后。

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

【参考方案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(
        $("<img>"))
    );
    
    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;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【讨论】：

谢谢..它几乎为正文中的所有内容提供了 .already-viewed 的课程，因此它取消了一些课程-弄乱了我的 css ..有什么想法吗？

您好，抱歉，它工作了一秒钟，然后我删除了不必要的 JS 文件，现在所有元素都获得了“已查看”类。这是我正在开发的网站：www.ranchosanvalentin.com。如果该块已经在视图中，则该元素具有“animBlock”类，那么它应该将“已查看”类添加到它。因为现在，如果它在视图中，它不会出现在屏幕上，直到你滚动

如果可以的话，可以创建“stacksn-ps”blog.***.com/2014/09/…，jsfiddlejsfiddle.net来演示吗？

尝试将选择器更改为 document.querySelectorAll("animBlock") ？

是的！这有帮助！但它删除了该 div 上的另一个类。关于如何添加类（不删除）的任何方式。非常感谢！