如果元素是viewport-停止滚动动画 [英] If element is in viewport- stop scroll animation

问题描述

您好我跟着一个教程：的http：// CSS -tricks.com/slide-in-as-you-scroll-down-boxes/

据工作得很好，但是，当一个元素已经在视窗（例如，如果浏览器小，页面加载），然后jQuery的不添加的类别后，才滚动转型。

有没有一种方法来检查元素是否已经在负载视窗，然后添加的一类'已经查看过的？

解决方案

尝试

  VAR查看= Array.prototype.map.call（document.querySelectorAll（身体*）
             ，功能（EL，I）{
                。回报（el.getBoundingClientRect（）底部＆LT; = window.innerHeight
                    ＆功放;＆安培; 。el.getBoundingClientRect（）左＆LT; = window.innerWidth）
                    ＆功放;＆安培; $（EL）.addClass（已查看过）及和放大器;埃尔
             }）滤波器（布尔型）;
 

\r

\r

$（文件）。就绪（函数（）{\r
    VAR体= $（身体）;\r
    $。每个（新阵列（180），功能（）{\r
        body.append（\r
        $（＆所述; IMG＆gt;中））\r
    }）;\r
    \r
    VAR观看= Array.prototype.map.call（document.querySelectorAll（身体*），功能（EL，I）{\r
        。回报（el.getBoundingClientRect（）底部＆LT; = window.innerHeight\r
               ＆功放;＆安培; 。el.getBoundingClientRect（）左＆LT; = window.innerWidth）\r
               ＆功放;＆安培; $（EL）.addClass（已查看过）及和放大器;埃尔\r
    }）滤波器（布尔型）;\r
    身体\r
    .append（总形象：+ $（img目录）长\r
                +，已经看：+ $（已经查看过。）长度）。\r
    的console.log（viewed.length，$（查看））\r
}）;

\r

{体\r
    宽度：1000像素;\r
    高度：1000像素;\r
}\r
IMG {\r
    宽度：50像素;\r
    高度：50像素;\r
    背景：海军;\r
}\r
.already查看过{\r
    概要：0.15em纯红色;\r
}

\r

＆LT;脚本src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>\r


\r


\r

Hi I followed a tutorial: http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

It is working just fine, however, when an element is already in viewport (like if the browser is small and the page is loaded), then the jQuery doesn't add the CLASS to transition until AFTER scroll.

Is there a way to check if an element is already in viewport on load and then add a class of 'already-viewed?'

解决方案

Try

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>

这篇关于如果元素是viewport-停止滚动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！