title: how to get maximum scroll height for ion content?
body: <p>I would like to calculate the current scroll percentage of my IonContent (it's an Ionic + React app)</p>
  
  <p>The page layout looks like this:</p>
  
  <pre><code>&lt;IonPage&gt;
    &lt;IonHeader&gt;
      &lt;IonToolbar&gt;
        &lt;IonButtons slot="start"&gt;
          &lt;IonMenuButton /&gt;
        &lt;/IonButtons&gt;
        &lt;IonTitle&gt;Page&lt;/IonTitle&gt;
      &lt;/IonToolbar&gt;
    &lt;/IonHeader&gt;
    &lt;IonContentid="main-content"
      scrollEvents={true}
      onIonScroll={(ev) =&gt; {
        // ToDo: calculate scroll percentage
        console.log(ev.detail.scrollTop);
      }}&gt;
      {// very long custom component
      }
      &lt;IonFooter&gt;
        &lt;IonLabel&gt;Footer &lt;/IonLabel&gt;
      &lt;/IonFooter&gt;
    &lt;/IonContent&gt;
  &lt;/IonPage&gt;
  </code></pre>
  
  <p>From the IonScroll event, I can read out the scrollTop which seems to be the current scroll position.<br>
  Now I need to get the maximal scrolling height of the IonContent.</p>
  
  <p><strong>Related questions are</strong>:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/17688595/finding-the-maximum-scroll-position-of-a-page">finding the maximum scroll position of a page</a></li>
  <li><a href="https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript">Cross-Browser Method to Determine Vertical Scroll Percentage in Javascript</a></li>
  <li><a href="https://stackoverflow.com/questions/61339421/how-to-calculate-height-of-scroll-content">how to calculate height of scroll content</a></li>
  </ul>
  
  <p>The accepted answer from the first question seems to provide the most complete approach, by taking the max over a selection of scrolling height values:</p>
  
  <pre><code>var limit = Math.max( document.body.scrollHeight, document.body.offsetHeight, 
                     document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight );
  </code></pre>
  
  <p>I've extended this by also adding:</p>
  
  <pre><code>document.scrollingElement.scrollHeight
  </code></pre>
  
  <p><strong>The problem:</strong></p>
  
  <p>In my scenario, the maximum over these values is around 660. But the logging output from <code>ev.detail.scrollTop</code> goes up to <code>680.76</code>.<br>
  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:</p>
  
  <pre><code>document.getElementById('main-content').scrollToPoint(0, 680);
  </code></pre>
  
  <p>How can I find the maximum scrolling coordinates?</p>