Scrolling content when mouse is over a button with absolute position (button should remain clickable)

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?

Steps to reproduce

1. Open example https://codesandbox.io/s/relaxed-wood-bqhxh?file=/src/App.js
2. Hover over the green button
3. Scroll with the mouse wheel

Desired Behavior You can scroll the container

Actual Behavior You can’t scroll the container

p.s. I know you can use pointer-events: none so that you can keep scrolling but this prevents button clicks.

Answer

I could achieve this by extending wheel event on button to scroll event on the scrollable div.

Checkout this pen: https://codesandbox.io/s/charming-forest-z8f9b

Note: This may not be an optimal solution. But, it works for your case!