Question

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

它有效，但不会更新。

他推荐ScrollStop。我添加它，但它不起作用。

我只把我的代码放在这里：

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

（另外，它使用的是bind方法，因此它有点过时了。）

所以，它可能很简单，但我没有让它发挥作用。

我是jQuery和javascript的新手。所以它可能非常简单。

Here's the website with the code and everything

编辑：适用于调整大小！但不是滚动。

Answer 1

从这里

jQuery - bind event on Scroll Stop

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

这是如何运作的。

该功能首先清除与数据元素scrollTimeout相关联的任何超时。

它认为创建一个新元素，传入函数时超时为250毫秒。

因此，当滚动移动时，它总是清除运行中的功能并将其重置为“稍微”运行。

当滚动停止时 - 它无法清除该功能，因此该功能执行。

可爱的技巧。

如果元素完全在视口中（实时），则执行一个函数

1 个答案: