javascript - 滚动溢出时检查视口(viewport)中对象的可见性

Question

我有一个包含链接图像的列表项的无序列表。我的 CSS 设置为一次只显示一张图像，由包含 UL 的宽度和高度定义。溢出设置为滚动。

我想检查图像是否可见(即在视口(viewport)中)(使用 jquery.visible 插件)，如果为真，则获取图像的 alt 属性并将其附加到页面上的 P 元素中。

但我不知道我的插件是否确定所有图像的可见性都是正确的，因为我在 CSS 中使用溢出来“隐藏”图像。

section#photos {
    background: url(../img/photo_bg.png) no-repeat center center;
    background-size: 710px 543px;
    width: 710px;
    height: 543px;
    position: relative;
}

 section#photos ul#container {
    position: relative;
    left: 45px;
    top: 5px;
    overflow: auto;
    height: 425px;
    width: 638px;
}

<section id="photos">
<ul id="container">
        <li class="photo"> <a href="#modalPhoto" data-toggle="modal" data-target="#modalPhoto" data-img-caption="Parker sleeps after feeding" data-img-url="http://placehold.it/1000x1000"><img class="lazy" src="http://placehold.it/1000x1000" alt="Parker sleeps after feeding" width="638px" height="425px"></a>

            <p class="caption">Parker sleeps after feeding</p>
        </li>
        <li class="photo"> <a href="#modalPhoto" data-toggle="modal" data-target="#modalPhoto" data-img-caption="Stork stats" data-img-url="http://placehold.it/1000x1000"><img class="lazy" src="http://placehold.it/1000x1000" alt="Stork stats" width="638px" height="425px"></a>

            <p class="caption">Stork stats</p>
        </li>
        <li class="photo"> <a href="#modalPhoto" data-toggle="modal" data-target="#modalPhoto" data-img-caption="Happy family" data-img-url="http://placehold.it/1000x1000"><img class="lazy" src="http://placehold.it/1000x1000" alt="Happy family" width="638px" height="425px"></a>

            <p class="caption">Happy family</p>
        </li>
        <li class="photo"> <a href="#modalPhoto" data-toggle="modal" data-target="#modalPhoto" data-img-caption="Happy Mom" data-img-url="http://placehold.it/1000x1000"><img class="lazy" src="http://placehold.it/1000x1000" alt="Happy Mom" width="638px" height="425px"></a>

            <p class="caption">Happy Mom</p>
        </li>
        <li class="photo"> <a href="#modalPhoto" data-toggle="modal" data-target="#modalPhoto" data-img-caption="Parker naps after feeding" data-img-url="http://placehold.it/1000x1000"><img class="lazy" src="http://placehold.it/1000x1000" alt="Parker naps after feeding" width="638px" height="425px"></a>

            <p class="caption">Parker naps after feeding</p>
        </li>
    </ul>
    <p class="caption_text"></p>
    <ul class="social_icons">
        <li><a href="http://facebook.com"><img src="http://placehold.it/22x22" alt="" width="22px" height="22px"></a>
        </li>
        <li><a href="#"><img src="http://placehold.it/22x22" alt="" width="22px" height="22px"></a>
        </li>
    </ul>
        </section>

$('#container li').each(function () {
    if ($(this).$('img').visible(true)) {
        $('.caption_text').empty().append($(this).attr('alt'));
    }
});

这是我的 fiddle :http://jsfiddle.net/patrickbeeson/VPqV3/3/

如有任何帮助，我们将不胜感激!

Answer 1

你需要检查滚动。

$(window).on('scroll', function(){
    $('#container li img').each(function () {
        if ($(this).visible(true)) {
            $('.caption_text').text($(this).attr('alt'));
        }
    });
});