当用户滚动到一个 div 时如何做某事？答案

【问题标题】：How to do something when user scroll until a div?当用户滚动到一个 div 时如何做某事？
【发布时间】：2011-04-07 19:55:20
【问题描述】：

我有一个div id="content"。

如果用户看到id="content"，是否可以执行操作？

【问题讨论】：

标签： jquery events html scroll

【解决方案1】：

我在horizontal scroll, detecting scroll position relative to anchors回答了类似的问题

参见工作示例http://jsfiddle.net/Vy33z/4/

如果您对 jQuery 不太熟悉，也可以使用插件。 Appear plugin 非常好用且易于使用。你需要做的就是

$('#mydiv').appear(function() {
  alert('Your div is in view');
});

【讨论】：

【解决方案2】：

看到了，就像在浏览器视口中一样？你看过这个viewport selector 插件吗？

【讨论】：

也许，但我不想使用插件
为什么不使用插件？该插件实际上非常小，您可以将其代码复制并粘贴到页眉中。或者只是查看它的来源并获取所需的内容。

【解决方案3】：

您可以使用这个 jQuery 插件轻松完成：jQuery Waypoints

【讨论】：

【解决方案4】：

也许你可以使用.scrollTop()。比如：

function scrolledTo(el, shownCallback, hiddenCallback) {
    var isVisible = false;
    var isScrolledTo = function(){
       var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

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

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

    $(window).scroll(function(){
        if(isScrolledTo()){
            if(!isVisible){
                isVisible = true;
                if(shownCallback)(shownCallback());
            }
        } else {
            if(isVisible){
                isVisible = false;
                if(hiddenCallback)(hiddenCallback());
            }
        }
    });
}

包含来自Check if element is visible after scrolling的代码

这是fiddle。

【讨论】：

而如何使用 scrollTop 做到这一点？

【解决方案5】：

您可以检查 div 的顶部是否在窗口视图中。如果您低于 div，则需要增强此代码。

    $(document).ready(function(){
    var divTop = $('#test5').get(0).offsetTop;

    $(window).scroll(function(){
        var windowHeight = $(window).height();
        var top = $(window).scrollTop();
        var windowBottom = (top+windowHeight);
        if(windowBottom > divTop){
            console.log('div in view');
        }
    });
});

HTML：

    <div id="test1" style="display: block; height: 200px;">1</div>
<div id="test2" style="display: block; height: 200px;">2</div>
<div id="test3" style="display: block; height: 200px;">3</div>
<div id="test4" style="display: block; height: 200px;">4</div>
<div id="test5" style="display: block; height: 200px;">5</div>

【讨论】：