javascript - how to get maximum scroll height for ion content? - Stack Overflow

admin管理员组

文章数量:1424467

I would like to calculate the current scroll percentage of my IonContent (it's an Ionic + React app)

The page layout looks like this:

<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 ponent
    }
    <IonFooter>
      <IonLabel>Footer </IonLabel>
    </IonFooter>
  </IonContent>
</IonPage>

From the IonScroll event, I can read out the scrollTop which seems to be the current scroll position.
Now I need to get the maximal scrolling height of the IonContent.

Related questions are:

• finding the maximum scroll position of a page
• Cross-Browser Method to Determine Vertical Scroll Percentage in Javascript
• how to calculate height of scroll content

The accepted answer from the first question seems to provide the most plete approach, by taking the max over a selection of scrolling height values:

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

I've extended this by also adding:

document.scrollingElement.scrollHeight

The problem:

In my scenario, the maximum over these values is around 660. But the logging output from ev.detail.scrollTop goes up to 680.76.
I've connected the debug inspector and tried scrolling from the console, to see what would happen for scroll value around 660. I can still see the content move when scrolling from 660 to 680:

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

How can I find the maximum scrolling coordinates?

I would like to calculate the current scroll percentage of my IonContent (it's an Ionic + React app)

The page layout looks like this:

<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 ponent
    }
    <IonFooter>
      <IonLabel>Footer </IonLabel>
    </IonFooter>
  </IonContent>
</IonPage>

From the IonScroll event, I can read out the scrollTop which seems to be the current scroll position.
Now I need to get the maximal scrolling height of the IonContent.

Related questions are:

• finding the maximum scroll position of a page
• Cross-Browser Method to Determine Vertical Scroll Percentage in Javascript
• how to calculate height of scroll content

The accepted answer from the first question seems to provide the most plete approach, by taking the max over a selection of scrolling height values:

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

I've extended this by also adding:

document.scrollingElement.scrollHeight

The problem:

In my scenario, the maximum over these values is around 660. But the logging output from ev.detail.scrollTop goes up to 680.76.
I've connected the debug inspector and tried scrolling from the console, to see what would happen for scroll value around 660. I can still see the content move when scrolling from 660 to 680:

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

How can I find the maximum scrolling coordinates?

• javascript
• html
• css
• ionic-framework

Share Improve this question Follow asked May 19, 2020 at 8:46 lhklhk 30.4k3636 gold badges137137 silver badges220220 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I think I found the solution:

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

I don't understand why this inpatibility was introduced though. Wouldn't it be possible to connect the scrollElement of the IonContent with document.scrollingElement? The standard is still a draft but implemented in all major browsers (expect IE).

本文标签： javascripthow to get maximum scroll height for ion contentStack Overflow