如何獲得離子內容的最大滾動高度？

Question

我想計算我的 IonContent 的當前滾動百分比（它是一個 Ionic + React 應用程序）

頁面布局如下所示：

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonButtons slot="start">
        <IonMenuButton />
      </IonButtons>
      <IonTitle>Page</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContentid="main-content"
    scrollEvents={true}
    onIonScroll={(ev) => {
      // ToDo: calculate scroll percentage
      console.log(ev.detail.scrollTop);
    }}>
    {// very long custom component
    }
    <IonFooter>
      <IonLabel>Footer </IonLabel>
    </IonFooter>
  </IonContent>
</IonPage>

從 IonScroll 事件中，我可以讀出似乎是當前滾動 position 的 scrollTop。
現在我需要獲取 IonContent 的最大滾動高度。

相關問題是：

• 找到頁面的最大滾動 position
• 在 Javascript 中確定垂直滾動百分比的跨瀏覽器方法
• 如何計算滾動內容的高度

第一個問題的公認答案似乎提供了最完整的方法，通過選擇最大的滾動高度值：

var limit = Math.max( document.body.scrollHeight, document.body.offsetHeight, 
                   document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight );

我還添加了以下內容來擴展它：

document.scrollingElement.scrollHeight

問題：

在我的場景中，這些值的最大值約為 660。但來自ev.detail.scrollTop的日志記錄 output 上升到680.76 。
我已連接調試檢查器並嘗試從控制台滾動，以查看滾動值在 660 附近會發生什么情況。當從 660 滾動到 680 時，我仍然可以看到內容移動：

document.getElementById('main-content').scrollToPoint(0, 680);

如何找到最大滾動坐標？

Answer 1

我想我找到了解決方案：

onIonScroll={async (ev) => {
  const elem = document.getElementById("ion-content-id");

  // the ion content has its own associated scrollElement
  const scrollElement = await ( elem as any).getScrollElement()

  const scrollPosition = ev.detail.scrollTop;
  const totalContentHeight = scrollElement.scrollHeight;
  const viewportHeight = elem.offsetHeight;

  const percentage = scrollPosition / (totalContentHeight - viewportHeight);
  console.log(percentage);
}}

我不明白為什么會引入這種不兼容性。 不能將scrollElement的IonContent與document.scrollingElement連接起來嗎？ 該標准仍是草案，但已在所有主要瀏覽器（IE 除外）中實施。