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
- Open example https://codesandbox.io/s/relaxed-wood-bqhxh?file=/src/App.js
- Hover over the green button
- Scroll with the mouse wheel
You can scroll the container
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.
I could achieve this by extending wheel event on button to scroll event on the scrollable div.
Checkout this pen:
Note: This may not be an optimal solution. But, it works for your case!