I have a page with an iframe which displays correctly, however, when the user is hovering on the iframe it is impossible to scroll the parent page as the scroll event is used inside of the iframe instead of the main page. I found this solution but I get the following error:

Uncaught DOMException: Permission denied to access property "document" on cross-origin object

So I tried to develop a workaround: I found out that setting mouse-events: none on the iframe allows the main page to scroll correctly; however, this of course prevents any element in the iframe to be clickable. Since I need links in the iframe to be clickable, I tried to dynamically set mouse-events: none when the user tries to scroll and mouse-events: auto when the user is not scrollin. Sadly, hovering on the iframe also prevents onScroll and onWheel events to be triggered at all, so this didn't work either.

Does anyone know of any viable solution or workaround to have clickable iframes in a page without them preventing the parent page from being scrollable?