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

当浏览器窗口中显示

div

时，我需要运行一些JavaScript，例如，当它滚动到时，甚至是重复。我该怎么做呢

基本结构：

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

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

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

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

---

Fiddle:

既然你暗示你在使用jQuery，你可能会

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

---

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

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

$（allInView）；
$（窗口）。滚动（allInView）；
函数IsCrolledinToView（elem）{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}
函数allInView（）{
如果（IsCrolledinToView（$（“.page1”））$（.page1”）.css（“背景色”，“红色”）；
else$（“.page1”）.css（“背景色”、“灰色”）；
如果（IsCrolledinToView（$（“.page2”））$（“.page2”）.css（“背景色”、“绿色”）；
else$（“.page2”）.css（“背景色”，“#333”）；
如果（IsCrolledinToView（$（“.page3”））$（.page3”）.css（“背景色”、“黄色”）；
else$（“.page3”）.css（“背景色”，“#222”）；
如果（IsCrolledinToView（$（“.page4”））$（.page4”）.css（“背景色”，“蓝色”）；
else$（“.page4”）.css（“背景色”，“#111”）；
}

获取div的位置、窗口的滚动位置、窗口高度，并计算它是否在边界内。可能重复

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

$(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");

}