滚动事件+ ngclass + ngfor

问题描述

要求：

当以下带有id = "scrollableDiv"的div处于视口中时，则“ is-visible”类应应用于该div。

问题：

仅对ngfor循环中的第一个元素触发

scrollhandler事件。对于循环中剩余的元素，它不会被解雇。

尝试了多种解决方法，但无法解决。

.html文件

<div (scroll)="scrollHandler($event)">
  <div>...some code</div>
  <div>...somecode</div>
  <div *ngFor="let content of desktopView; let i = index">
    <div class="row slide-view" style="background-image: url({{content.leftBackgroundurl}});">
      <div id="scrollableDiv" class="isInvisible col-3 offset-1 my-auto" [ngClass]="{'is-visible': isInViewPort === true }">
        <img src="{{content.leftMobileimage}}" alt="Image" class=" image-responsive mobile-image" />
      </div>
    </div>
  </div>
</div>

.ts文件

@HostListener('scroll',['$event'])
    scrollHandler(_event) {

        const isInvisible = document.querySelector('.isInvisible');
        const rect = isInvisible.getBoundingClientRect();


        if (rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight * 1.5 || document.documentElement.clientHeight * 1.5) && rect.right <= (window.innerWidth || document.documentElement.clientWidth)) {
            this.isInViewPort = true;
            console.dir(isInvisible);
        }

        else if (rect.top <= (-window.innerHeight * 0.5 || -document.documentElement.clientHeight * 0.5)) {
            this.isInViewPort = false;
        }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular2-directives angular9