如何获得离子内容的最大滚动高度？

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 事件中，我可以读出scrollTop，它似乎是当前的滚动位置。
现在我需要获取 IonContent 的最大滚动高度。

相关问题有：

• 查找页面的最大滚动位置
• 在 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高达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 除外）中实施。