jquery scrollspy插件将允许您轻松做到这一点。 https://github.com/thesmart/jquery-scrollspy

$('.tile').on('scrollSpy:enter', function() {
    console.log('enter:', $(this).attr('id'));
});

$('.tile').on('scrollSpy:exit', function() {
    console.log('exit:', $(this).attr('id'));
});

$('.tile').scrollSpy();

使用IntersectionObserver API

(在现代浏览器中本机)

通过使用观察器来确定一个元素在视口中是否可见，或者在任何可滚动的容器中是否可见，这是非常简单有效的。

无需附加滚动事件并手动检查事件回调，这更有效:

//定义一个观察者实例 var观察者= new IntersectionObserver(onIntersection， { Root: null， // default为视口 阈值:目标可见区域的。5 //百分比。触发“onIntersection” }) //在交集变化时调用回调函数 函数onIntersection(条目，opts){ 条目。forEach(入口= > entry.target.classList。切换(“可见”,entry.isIntersecting) ） ｝ //使用观察者来观察一个元素 观察者。观察(document.querySelector('.box')) //停止观察: / / observer.unobserve (entry.target) 跨度{:固定;上图:0;左:0;｝ .box{宽度:100 px;身高:100 px;背景:红色;保证金:1000 px;过渡:综合成绩;｝ .box。可见{背景:绿色;这个特性:50%;｝ <span>纵向滚动&水平…< / span > < div class = '盒子' > < / div >

现代浏览器(包括移动浏览器)支持。IE - View浏览器支持表中不支持

我正在寻找一种方法来查看元素是否即将进入视图，所以通过扩展上面的代码段，我设法做到了。我想我应该把这个留在这里，说不定能帮到谁

Elm =是视图中要检查的元素

scrollElement =你可以传递window或者带有滚动的父元素

Offset =如果你想让它在元素在屏幕前200px处触发，那么传递200

isscro冷景的功能(elem, scrole，抵消) { var $elem = $(elem); var $window = $); var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.抵消()top; var elemBottom = elemTop + $elem.height() 归来((elemBottom +) > = docViewBottom) &&偏移(elemTop-offset) < = docViewTop) | | ((elemBottom-offset) < = docViewBottom) && (elemTop +偏移)> = docViewTop); 的

修改了已接受的答案，以便元素必须将其display属性设置为“none”以外的值，以便质量为可见。

function isScrolledIntoView(elem) {
   var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();
  var elemDisplayNotNone = $(elem).css("display") !== "none";

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

在打印稿

  private readonly isElementInViewPort = (el: HTMLElement): boolean => {
      const rect = el.getBoundingClientRect();
      const elementTop = rect.top;
      const elementBottom = rect.bottom;
      const scrollPosition = el?.scrollTop || document.body.scrollTop;
      return (
        elementBottom >= 0 &&
        elementTop <= document.documentElement.clientHeight &&
        elementTop + rect.height > elementTop &&
        elementTop <= elementBottom &&
        elementTop >= scrollPosition
      );

};

Javascript代码可以写成:

窗口。addEventListener('scroll'， function() { var element = document.querySelector('#main-container'); var position = element.getBoundingClientRect(); //检查是否完全可见 如果位置。顶部>= 0 &&位置。bottom <= window.innerHeight) { console.log('元素在屏幕上完全可见'); ｝ //检查部分可见性 如果位置。顶部<窗口。innerHeight && position。底部>= 0){ console.log('元素在屏幕上部分可见'); ｝ })；

在react js中写为:

componentDidMount () { 窗口。addEventListener(“滚动”,this.isScrolledIntoView); ｝ componentWillUnmount () { 窗口。removeEventListener(“滚动”,this.isScrolledIntoView); ｝ isScrolledIntoView () { var element = document.querySelector('.element'); var position = element.getBoundingClientRect(); //检查是否完全可见 如果位置。顶部>= 0 &&位置。bottom <= window.innerHeight) { console.log('元素在屏幕上完全可见'); ｝ //检查部分可见性 如果位置。顶部<窗口。innerHeight && position。底部>= 0){ console.log('元素在屏幕上部分可见'); ｝ ｝