1

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!

Kylo
  • 15
  • 4

1 Answers1

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

thatrandomperson
  • 150
  • 1
  • 9
  • presumably you are adding this as a class to the tag? There is no straightforward way of doing this in Svelte that I know of, since the tag is not contained inside the route pages, only in the app.html which sits as a separate file. If I were not using Svelte, it would be the answer. – Kylo Jun 27 '22 at 18:40
  • @Kylo [this](https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily) could help you. – thatrandomperson Jun 27 '22 at 18:43
  • Feeling slightly daft. Even though the BODY tag sits in a separate file in the Svelte and SvelteKit architecture, it can still be accessed via the individual route files. That did not occur to me. I have therefore simply done this: document.getElementsByTagName("BODY")[0].className = "stop-scrolling" and that has resolved the issue. I will therefore mark your answer as technically correct. Thank you. – Kylo Jun 27 '22 at 18:49
  • 1
    No problem @Kylo , normal JS should always work with the web because it is client side. – thatrandomperson Jun 27 '22 at 18:51