javascript - 当 div 在浏览器窗口中可见时运行脚本

Question

当 a 在浏览器窗口中可见时，我需要运行一些 JavaScript div，例如，当它滚动到时，甚至是重复滚动时。我该怎么做呢？

基本结构：

<div class='page1'></div>

<div class='page2'></div>

<div class='page3'></div>

<div class='page4'></div>

CSS：

div {
    float: left;
    height: 500px;
    width: 500px;
    margin: 50px 0;
    background: grey;
}

小提琴：http: //jsfiddle.net/Q5BUe/1/

Answer 1

与其他提供的问题/解决方案一样，这里是完整的实现......

加载后，我们运行该函数为可见的 div 分配相应的颜色。在 jQuery 滚动处理程序上，我们继续调用该函数来分配新的背景颜色。

http://jsfiddle.net/Q5BUe/5/

$(allInView);
$(window).scroll(allInView);


function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function allInView() {

    if (isScrolledIntoView($(".page1"))) $(".page1").css("backgroundColor", "red");
    else $(".page1").css("backgroundColor", "grey");

    if (isScrolledIntoView($(".page2"))) $(".page2").css("backgroundColor", "green");
    else $(".page2").css("backgroundColor", "#333");

    if (isScrolledIntoView($(".page3"))) $(".page3").css("backgroundColor", "yellow");
    else $(".page3").css("backgroundColor", "#222");

    if (isScrolledIntoView($(".page4"))) $(".page4").css("backgroundColor", "blue");
    else $(".page4").css("backgroundColor", "#111");

}

Answer 2

由于您暗示您使用 jQuery，您可能会喜欢

if($('#element').is(':visible'))
{
    //do your thing
}