Javascript 如果某个元素完全位于视口中，则生成函数（活动）

我尝试使用jQuery插件来检测元素是否在视口中

它可以工作，但不会更新

他建议。我添加了它，但它不起作用

我只把代码放在这里：

$(document).ready(function() {
  $(window).bind("resize scrollStop", function() {
$("div").withinViewport().append("<span>hi</span>");
});
});

$（文档）.ready（函数（）{
$（窗口）.bind（“调整滚动停止的大小”，函数（）{
$（“div”）.withinViewport（）.append（“hi”）；
});
});

（另外，它使用的是bind方法，所以有点过时。）

所以，它可能很简单，但我没有让它工作

我不熟悉jQuery和javascript，所以。。这可能非常简单

编辑：调整大小！但不在滚动条上。

从这里开始

$.fn.scrollStopped=函数（回调）{
$（this）.scroll（函数（）{
var self=this，$this=$（self）；
if（$this.data（'scrollTimeout'））{
clearTimeout（$this.data（'scrollTimeout'））；
}
$this.data（'scrollTimeout'，setTimeout（回调，250，self））；
});
};
$（窗口）。已停止滚动（函数（）{
$（“div”）.withinViewport（）.append（“hi”）；
});

这是怎么回事

该函数首先清除与数据元素相关联的任何超时

scrollTimeout

它会在那里创建一个新元素，在传入函数时超时250毫秒

因此，当滚动条移动时，它总是将功能从运行中清除，并将其重置为“一点点”运行

当滚动停止时，它无法清除函数，因此函数将执行

---

可爱的小把戏。

@Hogan-aha，非常感谢：）我不太清楚它是如何工作的。我将在稍后更深入地研究它，但我测试了它，它工作正常，所以谢谢你！完全把我从数小时的代码和废话中解救出来。谢谢。但是当前的代码有一个缺点：不能用它多次绑定到一个元素。我为自己编辑了代码以实现这一点。看看这个@Dennis98--我不知道--使用全局整数似乎有点粗略--如果您真的需要倍数，我会实现一个事件列表。@Hogan很高兴知道这是可能的：D会很好，我目前不需要它，但很有可能以后我想将多个事件绑定到窗口对象，因此很有可能……）@Dennis98——使用事件列表是一种领先的设计——您可以查看C#和jQuery中的事件模型以获得示例。

$.fn.scrollStopped = function(callback) {           
        $(this).scroll(function(){
            var self = this, $this = $(self);
            if ($this.data('scrollTimeout')) {
              clearTimeout($this.data('scrollTimeout'));
            }
            $this.data('scrollTimeout', setTimeout(callback,250,self));
        });
    };

$(window).scrollStopped(function(){
    $("div").withinViewport().append("<span>hi</span>");
});