title: Tracking scroll position of a component in React
body: <p>I have a component that has a <code>main</code> tag in it with <code>overflow: auto</code>. Depending on the scroll height, I need to render a different element. How can I get an elements scroll position in React?</p>
  
  <p>The basic gist is this:</p>
  
  <pre class="lang-js prettyprint-override"><code>function App() {
    return (
      &lt;div&gt;
        &lt;main
          style={{
            backgroundColor: "red",
            overflow: "auto",
            height: "500px",
            padding: "5px"
          }}
        &gt;
          Please Track Me!
          &lt;div
            style={{ backgroundColor: "blue", color: "white", height: "5000px" }}
          &gt;
            Inner
          &lt;/div&gt;
        &lt;/main&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I need to track the <code>main</code>'s (with <code>overflow: auto</code>) scroll position somehow.</p>