title: How to render the actual value of the scroll percentage?
body: <p>I have this piece of code</p>
  <pre><code>import React from 'react'
  
  const App = () =&gt; {  
  
  function getScrollPercent() {
    var h = document.documentElement, 
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';
  
    var scrollPercent = Math.round((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
    //get the percentage of scroll
  
    return (isNaN(scrollPercent) ? '' : scrollPercent)
  }
  
  return (
    &lt;p&gt;{`${getScrollPercent()}%`}&lt;/p&gt;
  )
  </code></pre>
  <p>the problem is when I scroll the scrollPercent doesn't refresh in real time but only when the scroll stop, so scrollPercent can pass from 0% to 100% and not display all the numbers between 0 and 100, so the question is how can I modify my piece of code to display the actual value of scrollPercent even when I scroll</p>