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

我想计算当前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>

我扩展了这一点，还添加了：

document.scrollingElement.scrollHeight

问题：

在我的场景中，超过这些值的最大值约为660。但是

ev.detail.scrollTop

的日志输出上升到

680.76

我已连接调试检查器并尝试从控制台滚动，以查看滚动值在660左右时会发生什么情况。当从660滚动到680时，我仍然可以看到内容移动：

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

---

如何找到最大滚动坐标？

我想我找到了解决方案：

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);
}}

---

我不明白为什么会引入这种不兼容。难道不能将

IonContent

的

scrollingElement

与

document.scrollingElement

连接起来吗？但是在所有主要浏览器中都实现了（IE除外）。

您的回答确实很有帮助，但我想知道，“异步”是否必要？Nvm，忽略我之前的问题，我尝试删除“异步”，但它不起作用，一直未定义或未定义。

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);
}}