Question

我要在滚动过去或加载$("yt-next-continuation")时执行我的功能，此div基本上是当您滚动到页面底部时YouTube加载的额外视频。最简单的方法是什么？

我基本上想要做的是，当您向下滚动页面时，当youtube加载到更多视频时，在缩略图上添加叠加层。 Atm我的代码在我第一次刷新他们的网站时正在运行，但是当更多视频加载时却没有。

Answer 1

请看看这两个问题：

How to detect scroll position of page using jQuery

如上所述，您可以通过以下方式获得元素的顶部位置：

document.elementFromPoint()

您当前的位置：

$('#yourElement').offset().top;

所以就这样做：

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
});

使用一些CSS做你喜欢做的事情：

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    if( scroll > $('#yourElement').offset().top ){
        $("body").addClass("youReachedTheElementsPosition");
    }else
        $("body").removeClass("youReachedTheElementsPosition");
    }
});

您可以使用transitions添加动画。

.youReachedTheElementsPosition span{color:red;}

Answer 2

可以使用scroll magic来对div上的esecute事件进行可视化。也可以使用这个功能。

$(window).scroll(function () {
  isScrolledIntoView($("#yt-next-continuation"));
});

function isScrolledIntoView(elem) {
  var $elem = $(elem);
  var $window = $(window);

  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window[0].innerHeight;

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

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

如果显示div，则函数返回true，并且可以在返回true时执行任何函数。

加载div后执行一个函数

2 个答案: