HTML表格的无限垂直滚动

Question

对于HTML表格，应该出现“垂直无限滚动”。

请在此处找到控制器代码， 这是我的控制器代码。 如果您需要其他详细信息，请告诉我 提前致谢 ， 所以在这里我需要无限的垂直滚动。 当我向下滚动时，它会显示直到最后的记录，但是现在它只显示10条记录

onScrolled(event) {
        if (event && event.srcElement) {
            const scrollHeight = event.srcElement.scrollHeight;
            const scrollTop = event.srcElement.scrollTop;
            const offsetHeight = event.srcElement.offsetHeight;
            if (offsetHeight + scrollTop >= scrollHeight && this.allowAPICall && !this.completeDataLoaded) {
                const accountIds = this.getAccounts();
                this.initializeLoadTransactions(accountIds, this.selectedFilters.type);
            }
        }
        this.sortingColumn = [];
    }

这是CSS代码，我做了以下更改 但我无法获得无限的垂直滚动。 在这里，我已经使用tran-table无限滚动到HTML表

table {
  background: linear-gradient(90deg, rgb(240, 240, 240), rgb(250, 250, 250));
  overflow: auto;
  height: 100%;
  th {
    color: blue;
    border-top: 0;
    padding: 20px 0px 20px 15px;
    font-size: 1rem !important;
  }
  tbody tr {
    border-top: 1px solid #ececec;
    td {
      padding: 25px 0px 25px 15px;
      font-size: 1rem;
      border-top: 0;
      vertical-align: top;
    }
  }
}

.table thead th {
  vertical-align: initial !important;
}

.transDetailsRecord {
  overflow: auto;
  height: 100%;
}

.tran-table::-webkit-scrollbar {
  width: 5px;
}

.tran-table::-webkit-scrollbar-thumb {
  background: #888;
}

This is the HTML code and done below changes but I am unable to get the Infinte vertical scroll Here I have done with transtable for Infinte scroll to a html table

<div class="transDetailsRecord">
  <table class="table ">
    <caption class="sr-only">Your Transactions</caption>
    <thead>
      <th (click)="transactionSorting('date');">
        Date <i class="fa" [ngClass]="sortingIconClass('date')" aria-hidden="true"></i>
      </th>
      <th (click)="transactionSorting('accountId');">
        Account #<i class="fa" [ngClass]="sortingIconClass('accountId')" aria-hidden="true"></i>
      </th>
      <th (click)="transactionSorting('accountNickName');">
        Account Nickname<i class="fa" [ngClass]="sortingIconClass('accountNickName')" aria-hidden="true"></i>
      </th>
      <th (click)="transactionSorting('transaction');">
        Transaction Type <i class="fa" [ngClass]="sortingIconClass('transaction')" aria-hidden="true"></i>
      </th>
      <th (click)="transactionSorting('symbolcusip');">
        Symbol/CUSIP <i class="fa" [ngClass]="sortingIconClass('symbolcusip')" aria-hidden="true"></i>
      </th>
      <th (click)="transactionSorting('description');">
        Description <i class="fa" [ngClass]="sortingIconClass('description')" aria-hidden="true"></i>
      </th>
      <th (click)="transactionSorting('heldin');">
        Held In <i class="fa" [ngClass]="sortingIconClass('heldin')" aria-hidden="true"></i>
      </th>
      <th (click)="transactionSorting('quantity');">
        Qty <i class="fa" [ngClass]="sortingIconClass('quantity')" aria-hidden="true"></i>
      </th>
      <th (click)="transactionSorting('price');">
        Price <i class="fa" [ngClass]="sortingIconClass('price')" aria-hidden="true"></i>
      </th>
      <th (click)="transactionSorting('amount');">
        Value ($) <i [ngClass]="sortingIconClass('amount')" aria-hidden="true"></i>
      </th>
    </thead>

    <tbody *ngIf="loading || error || noData">
      <tr>
        <td colspan="10" style="
            text-align: center" *ngIf="loading">
          <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
          <span class="sr-only">Loading...</span>
        </td>
        <td colspan="10" style="
            text-align: center" *ngIf="error">
          <ngb-alert [dismissible]="false" type="danger">{{errorMessage}}</ngb-alert>
        </td>
        <td colspan="10" style="
            text-align: center" *ngIf="noData">
          <ngb-alert [dismissible]="false" type="info">No transactions available</ngb-alert>
        </td>
      </tr>
    </tbody>

    <tbody class="tran-table" *ngIf="transactions?.length > 0 && !loading && !error && !noData" (scroll)="onScrolled($event);">
      <ng-container *ngFor="let t of transactions">
        <tr>
          <td>{{t.date?.format('MM/DD/YYYY')}}</td>
          <td>{{t.accountNumber | maskAccountno: maskAccountNo}}</td>
          <td>{{t.accountNickName}}</td>
          <td>{{t.transaction}}</td>
          <td>{{t.symbolcusip}}</td>
          <td>{{t.description | titlecase}}</td>
          <td>{{t.heldin}}</td>
          <td>{{t.quantity}}</td>
          <td>{{t.price | currency}}</td>
          <td>{{t.amount | currency}}</td>
        </tr>
        <tr *ngIf="t.showRealizedData">
          <th>Puchase Date</th>
          <th>Quantity</th>
          <th>Unit Cost($)</th>
          <th>Cost Basis($)</th>
          <th>Price($)</th>
          <th>Value($)</th>
          <th>Short term<br>Gain/Loss($)</th>
          <th style="border-right: 0;">Long term<br>Gain/Loss($)</th>
          <th style="width: 12%;border-right: 0;">
            <img class="icon mr-3" title="Export CSV" *ngIf="t.subTransactions?.length > 0" (click)="download('text/csv')" src="./assets/images/export_CSV.png" />
          </th>
        </tr>
        <ng-container *ngIf="t.showRealizedData">
          <tr *ngIf="subTableLoading || subTableError || subTableNoData">
            <td *ngIf="subTableLoading">
              <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
              <span class="sr-only">Loading...</span>
            </td>
            <td *ngIf="subTableError">
              <ngb-alert [dismissible]="false" type="danger">{{errorMessage}}</ngb-alert>
            </td>
            <td *ngIf="subTableNoData">
              <ngb-alert [dismissible]="false" type="info">No transactions available</ngb-alert>
            </td>
          </tr>
          <ng-container *ngIf="!subTableLoading && !subTableError && !subTableNoData">
            <tr *ngFor="let st of t.subTransactions;let i = index;" [ngClass]="{'sub-table-last-row': t.subTransactions.length-1 === i}">
              <td><span class="t-sub-cell1">{{st.acquisitionDate
                                | date : 'MMM d, y'}}</span></td>
              <td><span class="t-sub-cell1">{{st.quantity}}</span></td>
              <td><span class="t-sub-cell1">{{st.avgCostIndicator}}</span></td>
              <td><span class="t-sub-cell1">{{st.adjustedCost}}</span></td>
              <td><span class="t-sub-cell1">{{st.purchaseCost}}</span></td>
              <td><span class="t-sub-cell1">{{st.soldValue}}</span></td>
              <td><span class="t-sub-cell1">{{st.shortTermGainLoss}}</span></td>
              <td style="border-right: 0;"><span class="t-sub-cell1">{{st.longTermGainLoss}}</span></td>
            </tr>
          </ng-container>
        </ng-container>
      </ng-container>
      <tr *ngIf="!allowAPICall">
        <td>
          <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
          <span class="sr-only">Loading...</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>