angular - Ionic 3如何检测元素是否在滚动视图中

Question

我已经动态呈现了离子卡列表。离子卡被分组在特定的组中，后跟带有该组名称的标题 div 和 class day-overview-group。是否可以检测组是否有让我们说 7+ 离子卡添加位置粘到该标题的类，并在用户滚动超出该组时将其关闭？

@编辑

现在，我所需要的只是.day-overview-group一旦它有 5 张以上的卡片，就可以通过某种方式来定位特定目标

• 并且用户可以看到一次添加固定到顶部的类
• 一旦卡片不在视口中，就删除该固定类

<ion-grid *ngFor="let day of dayOverViewByGroup; let i = index" padding>
    <div *ngIf="day.children.length > 0">
      <div class="day-overview-group">
        <h2 class="day-overview-group__name">{{day.name}}</h2>
        <p class="day-overview-group__children">({{day.totalCheckinChildren}}/{{day.totalChildren}})</p>
      </div>

      <ion-row align-items-center class="card-header">
        <ion-col col-2 [attr.col-3]="!displayCheckin ? '' : null">
          <p class="card-header__item">Name</p>
        </ion-col>
        <ion-col col-5 [attr.col-6]="!displayCheckin ? '' : null">
          <p class="card-header__item">Kommentar Kita</p>
        </ion-col>
        <!-- <ion-col col-2>
          <p card-header__item>Kommentar Eltern</p>
        </ion-col> -->
        <ion-col col-2>
          <p class="card-header__item">Status</p>
        </ion-col>
        <ion-col col-1>
          <p class="card-header__item">Timeedit</p>
        </ion-col>
        <ion-col col-2 *ngIf="displayCheckin" text-center>
          <p class="card-header__item">Checkin</p>
        </ion-col>
      </ion-row>

      <ion-card *ngFor="let children of day.children; let j = index">
        <ion-card-content>
          <ion-row align-items-center class="row {{children.class}} row__center">
            <!-- name-column col-2 -->
            <ion-col col-2 [attr.col-3]="!displayCheckin ? '' : null">
              <div class="{{children.awayClass}}{{children.addtionalClass}}">
                <h2 class="child-name" (click)="detailChildren(children.id)">{{children.name}}</h2>
                <div class="children__activities" *ngIf="activities.length > 4">
                  <button class="children__activities__button"
                    (click)="detailChildrenToReportTab(children.id, selectedDateTitle)">See full report</button>
                </div>
                <div class="children__activities" *ngIf="activities.length < 5">
                  <span *ngFor="let activity of activities" class="activity__emoji"
                    (click)="detailChildrenToReportTab(children.id, selectedDateTitle)">{{activity.emoji}}</span>
                </div>
              </div>
              <div *ngIf="children.additionalDay">
                Zusatzbetreuung {{children.description}}
              </div>

              <div *ngIf="children.reason">
                {{children.reason}}
              </div>
            </ion-col>
            <!-- kommentar kita col-3 -->
            <ion-col col-5 [attr.col-6]="!displayCheckin ? '' : null">
              <div>
                <ion-textarea clearOnEdit="false" ion-row="5" [(ngModel)]="children.daycareComment"
                  (change)="commentDayCare(children.daycareComment, dateForDayOverView, children, day.presence_id)"
                  autosize placeholder="Bemerkung erfassen..."></ion-textarea>
              </div>
              <div class="parent-comment" *ngIf="children.parentComment">
                <h3 class="parent-comment__title">Parent comment</h3>
                <p claass="parent-comment__message">{{children.parentComment}}</p></div>
            </ion-col>

            <!-- status column col-1-->
            <ion-col col-2>
              <div>{{children.checkout}}</div>

              <div *ngFor="let singleCheck of children.checkin; let jj = index">
                <div *ngIf="singleCheck.inorout == '1'">
                  Checkin: {{ singleCheck.timestampInorout }}
                </div>
                <div *ngIf="singleCheck.inorout == '0'">
                  Checkout: {{ singleCheck.timestampInorout }}
                </div>
              </div>

            </ion-col>
            <!-- *ngIf="children.checking.inorout == '0'" -->
            <ion-col col-1 class="more"
              *ngIf="children.checkin || children.checkin !== undefined || children.checkin !== null">
              <button style="background-color: transparent" icon-only (click)="openStatusModal(children)">
                <ion-icon style="color: black; font-size: 2.75rem" name="more"></ion-icon>
              </button>
            </ion-col>
            <ion-col class="col--center" col-2 *ngIf="displayCheckin">

              <div *ngIf="children.reason; then checkAway else checkNormal"></div>

              <ng-template #checkAway>
                <button *ngIf="!children.disabled" ion-button class="toggleCheck"
                  (click)='newCheckInCheckOut(dateForDayOverView, children, day)' color="light"
                  >Einchecken</button>
              </ng-template>

              <ng-template #checkNormal>
                <button *ngIf="!children.disabled" ion-button class="toggleCheck"
                  (click)='newCheckInCheckOut(dateForDayOverView, children, day)' color="green"
                  >Einchecken</button>
              </ng-template>
              <button *ngIf="children.disabled" ion-button class="toggleCheck"
                (click)='newCheckInCheckOut(dateForDayOverView, children, day)' color="danger">Auschecken</button>
            </ion-col>
          </ion-row>
        </ion-card-content>
      </ion-card>
    </div>

  </ion-grid>

标签： angularionic3