title: how can I put a document.addEventListener("scroll") in other file to call it in my component?
body: <p>I have this code with which I can check when the <code>bottom</code> of a <code>div</code> is reached by <code>scrolling</code>:</p>
  <pre><code>const checkBottomDiv = (el: HTMLElement) =&gt; {
    return el.getBoundingClientRect().bottom - 400 &lt;= window.innerHeight;
  };
  
  const contentArticleId = document.getElementById(&quot;myDiv&quot;) as HTMLElement;
  
  const trackScrolling = () =&gt; {
    callback();
  
    if (checkBottomDiv(contentArticleId)) {
      console.log(&quot;bottomDiv&quot;);
      document.removeEventListener(&quot;scroll&quot;, trackScrolling);
    }
  };
  document.addEventListener(&quot;scroll&quot;, trackScrolling);
  </code></pre>
  <p>I would like to reuse this functionality in other <code>components</code> and for this reason, I would like to put this logic in a separate function and then call it (<code>function.ts</code>).</p>
  <p>I am doing this:</p>
  <pre><code>app.tsx.  //component
  
  useEffect(() =&gt; {
    let element = document.getElementById(&quot;myDiv&quot;) as HTMLElement;
    trackScrolling(element, callback);
  })
  
  
  function.ts. //function file
  
  const checkBottomDiv = (el: HTMLElement) =&gt; {
    return el.getBoundingClientRect().bottom - 400 &lt;= window.innerHeight;
  };
  
  export const trackScrolling = (element: HTMLElement, callback: () =&gt; void) =&gt; {
    if (checkBottomDiv(element)) {
      callback();
      document.removeEventListener(&quot;scroll&quot;, trackScrolling);
    }
  };
  document.addEventListener(&quot;scroll&quot;, trackScrolling);
  </code></pre>
  <p>but I get errors that I don't know how to fix.</p>
  <p>this is my live code:</p>
  <p><a href="https://codesandbox.io/s/epic-solomon-hu3e3" rel="nofollow noreferrer">https://codesandbox.io/s/epic-solomon-hu3e3</a></p>
  <p>what am I doing wrong and how can I fix it.</p>