title: Scrolling content when mouse is over a button with absolute position (button should remain clickable)
body: <p>I am trying to scroll a content while the mouse is over a div or a button. This is important because it feels like the app is stuck if you cannot scroll. But the button should remain clickable. Any ideas on how to achieve this?</p>
  <p><strong>Steps to reproduce</strong></p>
  <ol>
  <li>Open example <a href="https://codesandbox.io/s/relaxed-wood-bqhxh?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/relaxed-wood-bqhxh?file=/src/App.js</a></li>
  <li>Hover over the green button</li>
  <li>Scroll with the mouse wheel</li>
  </ol>
  <p><strong>Desired Behavior</strong>
  You can scroll the container</p>
  <p><strong>Actual Behavior</strong>
  You can't scroll the container</p>
  <p>p.s. I know you can use <code>pointer-events: none</code> so that you can keep scrolling but this prevents button clicks.</p>