在 angular 应用程序中向上而不是向下加载更多按钮按钮

Question

我有一个 angular 应用程序。 直到今天它在谷歌浏览器中运行良好，但今天当我点击加载更多按钮时，加载更多按钮仍然存在，并且每次在顶部推送 10 个产品。 这意味着当我们单击更多按钮时，一些数据加载并且更多按钮通过滚动而下降，我们可以再次加载，但在我的情况下，加载更多按钮总是在屏幕上并且产品加载它是顶部。 滚动 position 更改并保持 position 始终在加载按钮上。 但在 Microsoft Edge 中它工作正常。 你能帮我解决这个问题吗？

我的 html 在这里..

 <mat-card class="mb-2">
                    <ng-container *ngFor="let fruit of fruits; let i = index;">
                        <div class="row pad-20" *ngIf="(i % 2 === 0)">
                            <div class="col-sm-6 mouse-hover d-flex justify-content-center">
                                <img class="cart-deatils-img" mat-card-image
                                    src=" 
                            {{appHost.hostName}}images/fruitImages/{{fruit?.fileName[0]}}">
                            </div>
                            <div class="col-sm-6 vertically-center">
                                <mat-card-content>
                                    <br />
                                    <div>
                                        <span class="display-2 shadow-text text-center font-weight>
                                            {{fruit?.name}}
                                        </span>
                                        <span>(<span *ngFor="let star of getFullStar(fruit?.rating)"
                                                class="material-icons color-orange font-13">
                                                grade
                                            </span>
                                            <span *ngFor="let star of getOutlineStar(fruit?.rating)"
                                                class="material-icons color-orange font-13">
                                                star_border
                                            </span>)
                                        </span>
                                    </div>
                                    <div>
                                        <span *ngIf="!fruit?.isActive" class="badge badge-warning 
                                               shadow-text text-center font-weight-bold my-3">
                                            Unavailabe
                                        </span>
                                    </div>
                                    <div class="mb-4 font-13">
                                        <span>
                                            {{fruit?.description}}
                                        </span>
                                    </div>
                                    <a class="no-decoration font-13"
                                        routerLink="/general-user/fruit/details/{{fruit?.id}}">
                                        <button mat-mini-fab color="warn"
                                            aria-label="Example icon button with a filter list icon">
                                            <mat-icon>call_missed_outgoing</mat-icon>
                                        </button> <span style="padding: 10px;">SEE DETAILS</span>
                                    </a>
                                </mat-card-content>
                            </div>
                        </div>
                        <div class="row mt-4 pad-20" *ngIf="!(i % 2 === 0)">
                            <div class="col-sm-6 vertically-center">
                                <mat-card-content>
                                    <br />
                                    <div>
                                        <span class="display-2 shadow-text text-center font-weight- 
                                           bold my-3">
                                            {{fruit?.name}}
                                        </span>
                                        <span>(<span *ngFor="let star of getFullStar(fruit?.rating)"
                                                class="material-icons color-orange font-13">
                                                grade
                                            </span>
                                            <span *ngFor="let star of getOutlineStar(fruit?.rating)"
                                                class="material-icons color-orange font-13">
                                                star_border
                                            </span>)
                                        </span>
                                    </div>
                                    <div>
                                        <span *ngIf="fruit?.isActive" class="badge badge-success 
                            shadow-text text-center font-weight-bold my-3">
                                            Availabe
                                        </span>
                                        <span *ngIf="!fruit?.isActive">
                                            Unavailabe
                                        </span>
                                    </div>
                                    <div class="mb-4 font-13">
                                        <span>
                                            {{fruit?.description}}
                                        </span>
                                    </div>
                                    <a class="no-decoration font-13"
                                        routerLink="/general-user/fruit/details/{{fruit?.id}}">
                                        <button mat-mini-fab color="warn"
                                            aria-label="Example icon button with a filter list icon">
                                            <mat-icon>call_missed_outgoing</mat-icon>
                                        </button> <span style="padding: 10px;">SEE DETAILS</span>
                                    </a>
                                </mat-card-content>
                            </div>
                            <div class="col-sm-6 mouse-hover d-flex justify-content-center">
                                <img class="cart-deatils-img" mat-card-image
                                    src=" 
                                {{appHost.hostName}}images/fruitImages/{{fruit?.fileName[0]}}">

                            </div>
                        </div>
                    </ng-container>
                    <div *ngIf="!noMore" class="mb-1 mt-4 font-roboto row d-flex justify-content- 
                   center">
                            <button type="button" class="btn-not-focus" mat-raised-button style="

background: #F25C05; color: white; width: 250px;
                    font-size: 15px;" (click)="onLoadMore()">
                                <span *ngIf="!isProgress" class="material-icons icon-vertical">
                                    hourglass_empty
                                </span>
                                <span *ngIf="!isProgress" class="font-with-text"> Load More 
  Fruit</span>
                                <span *ngIf="isProgress" class="processing-span">Loading Fruit 
   Wait...
                                    <mat-spinner [diameter]="30" class="spinner-sapn"></mat-spinner>
                                </span>
                            </button>
                        </div>
                    </mat-card>

我的负载更多 function 在这里

    onLoadMore(){
        this.isProgress = true;
        this.fruitService.getByCount(this.fruits.length).subscribe((res: any) => {
          if (res.obj != null) {
            let fruit = res.obj;
            let length = fruit.length;
            if(length < 4){
              this.noMore = true;
            }
            for(let i = 0; i < fruit.length; i++){
              this.fruits.push(fruit[i]);
            }
          }
          this.isProgress = false;
        }, e =>{      
          this.isProgress = false;
          this.noMore = true;
        });
      }

 

我在这里加载每条路线

    <mat-sidenav-container class="sidenav-container font-roboto">
      <!-- <mat-sidenav [opened]="showAllTabNav" #drawer class="sidenav" fixedInViewport> -->
      <mat-sidenav-content>
        <ng-content></ng-content>
        <div>
          <router-outlet></router-outlet>
        </div>
      </mat-sidenav-content>
    </mat-sidenav-container>

Answer 1

我最近在 React with Chrome 中遇到了同样的问题。

现在的修补程序是添加overflow-anchor: none; 到按钮的CSS，甚至是内容的容器

我在这里更详细地回答了： https://stackoverflow.com/a/63327574/14062868