How to prevent any scrolling outside the iFrame? (Svelte)

Question

I have an iframe in a webpage:

<iframe id="wordBookiFrame" src="/wordBook" style="position:absolute; width:100%; height:100%;"></iframe>

When viewing the webpage on a small screen (ie a smartphone), both the iframe and the main page becomes scrollable, which is to be expected, as seen here.

When scrolling to the very end of the iframe however, if you continue to scroll, the main page (the 'body') scroll takes over and the user will then scroll to the bottom of the body too. I assume this is standard browser behaviour.

However the consequence of this behaviour is that when a user tries to then scroll up in the iframe, it gets stuck, as scrolling of the body takes priority over the iframe. Simply put, the body seems to "take over" and take precedence over the iFrame itself and results in sticky scroll behaviour of the iFrame. I need to therefore somehow disable scrolling of the body in Svelte when the iframe is visible. However, there is no easy way to do this in Svelte, since the BODY tag sits in a separate file.

The solution I have attempted is as follows (placed inside a settimeout function):

if(document.getElementById("wordBookiFrame").style.display == "block") //as the iframe only displays in certain circumstances
{
   window.addEventListener('scroll',(event) => {
   window.scrollTo(0,0)
   return;
   });
}

The thinking behind this code is that by forcing the main page to scroll position 0,0, you can avoid this problem. Unfortunately, the code is temperamental.

I hope to find some easy solutions to this annoying problem!

Answer 1

To stop outside scrolling

Add this css:

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

And then add and remove the stop-scrolling class with JavaScript. Edit: add it to the body tag.

Even if Svelte does not let you access the body tag adding a script tag is client side and will always work