title: Prevent scrolling using CSS on React rendered components
body: <p>So I render a component via React within my <code>html</code> like so:</p>
  
  <pre><code> &lt;html&gt;
    &lt;body&gt;
      &lt;div id=app&gt;${appHtml}&lt;/div&gt;
      &lt;script src="/bundle.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Within my app I have a burger button, that <code>onClick</code> goes full screen.</p>
  
  <p>However, the body is scrollable. I'd normally add a class to the <code>body</code> tag and make it <code>overflow: hidden</code> to prevent this. However, my react component is rendered within the <code>body</code> tag so I have no control over toggling classes based on a click within a react component.</p>
  
  <p>Has anyone got any ideas/advice on how i'd achieve what i'm looking for.</p>
  
  <p>Thanks!</p>