What is the best way to prevent an iFrame from causing its parent window to scroll?

Question

What is the best way to prevent an iFrame from causing its parent window to scroll?

I recently came across an HTML document that includes an iframe towards the bottom of its content.

Specifically, the iframe is embedding a Google Spreadsheet, using the following code:

<iframe id="gsheet-group" width="100%" height="400" src="https://docs.google.com/spreadsheets/d/<!----DOCUMENT_KEY----->/edit?usp=sharing&rm=minimal&gid=0&single=true&widget=false&chrome=false&headers=false">Loading sheet..</iframe>

It seems like the iframe may contain some javascript that triggers the parent window to scroll to the top under certain conditions, such as when the content is fully loaded or when it is navigated in specific ways. This behavior persists even if the iframe is nested within another iframe.

If I'm unable to directly edit the source code of the iframe, is there a way to prevent the parent window from being affected by the javascript inside the embedded iframe?

My Attempts So Far

I appreciate the suggestions provided by other users, but unfortunately none of them have resolved this issue:

Adding

sandbox="allow-scripts allow-forms allow-pointer-lock allow-same-origin"

to the <iframe> element (to remove allow-top-navigation; @CBroe).

Attempting to override window.scrollTo (@Ryano)
Placing the iframe within a separate iframe (@Ryano)

javascript html css iframe

Answer 1

Answer №1

There is an API that can enable cross-origin iframes to scroll the top document called Element#scrollIntoView(). While I haven't confirmed if this was used in your specific scenario, it seems like a plausible explanation.

Here's a simple example to demonstrate:

Execute the snippet
Manually scroll to the top of the page immediately
Wait for about 2 seconds for the snippet to automatically scroll back into view

(You can also click within the result iframe to trigger scrollIntoView again after 2 seconds).

onclick = e => setTimeout(() => {
  document.body.scrollIntoView();
}, 2000);
onclick();

Scroll to the top of the top page and wait 2s.

Upon further investigation, there doesn't seem to be a straightforward way to prevent this behavior... However, it's worth noting that Chrome won't scroll to fixed elements within an iframe. This insight suggests a workaround could be creating a "scroll-stop" layer by enclosing the target iframe within another iframe, setting its position to fixed to cover the wrapping iframe entirely. This would stop Chrome from scrolling the iframe's ancestors:

iframe { position: fixed; top: 0; width: 100vw; height: 100vh; border: none; padding: 0; margin: 0; }

<iframe srcdoc="
<script>
  onclick = e => setTimeout(() => {
    document.querySelector('h1').scrollIntoView();
  }, 2000);
  onclick();
</script>
<h1 style='margin-top: 100vh' >I still scroll into view, but not the top page.</h1>
"></iframe>

Keep in mind that this workaround is essentially exploiting a bug, may not function in other browsers, and could potentially be fixed in future Chrome updates.
For now, this is the only solution I've come across.

I suggest sharing your thoughts with the W3C's CSS working group on Github repo to propose adding a property that officially supports this feature.

Answer 2

There is an API that can enable cross-origin iframes to scroll the top document called Element#scrollIntoView(). While I haven't confirmed if this was used in your specific scenario, it seems like a plausible explanation.

Here's a simple example to demonstrate:

Execute the snippet
Manually scroll to the top of the page immediately
Wait for about 2 seconds for the snippet to automatically scroll back into view

(You can also click within the result iframe to trigger scrollIntoView again after 2 seconds).

onclick = e => setTimeout(() => {
  document.body.scrollIntoView();
}, 2000);
onclick();

Scroll to the top of the top page and wait 2s.

Upon further investigation, there doesn't seem to be a straightforward way to prevent this behavior... However, it's worth noting that Chrome won't scroll to fixed elements within an iframe. This insight suggests a workaround could be creating a "scroll-stop" layer by enclosing the target iframe within another iframe, setting its position to fixed to cover the wrapping iframe entirely. This would stop Chrome from scrolling the iframe's ancestors:

iframe { position: fixed; top: 0; width: 100vw; height: 100vh; border: none; padding: 0; margin: 0; }

<iframe srcdoc="
<script>
  onclick = e => setTimeout(() => {
    document.querySelector('h1').scrollIntoView();
  }, 2000);
  onclick();
</script>
<h1 style='margin-top: 100vh' >I still scroll into view, but not the top page.</h1>
"></iframe>

Keep in mind that this workaround is essentially exploiting a bug, may not function in other browsers, and could potentially be fixed in future Chrome updates.
For now, this is the only solution I've come across.

I suggest sharing your thoughts with the W3C's CSS working group on Github repo to propose adding a property that officially supports this feature.

Answer 3

Answer №2

After receiving advice from @Kaiido to raise this issue with W3C, feedback on the topic has indicated that the current standards do not support the desired functionality. If approved, a suggestion might allow for disabling vertical scrolling through:

<iframe src="..." allow="vertical-scroll 'none'"></iframe>

You can monitor the progress of the proposal here.

Answer 4

After receiving advice from @Kaiido to raise this issue with W3C, feedback on the topic has indicated that the current standards do not support the desired functionality. If approved, a suggestion might allow for disabling vertical scrolling through:

<iframe src="..." allow="vertical-scroll 'none'"></iframe>

You can monitor the progress of the proposal here.

What is the best way to prevent an iFrame from causing its parent window to scroll?

My Attempts So Far

Answer №1

Answer №2

Similar questions

Viewing HTML in Gmail shows the raw code with tags, making it easy to read with no fancy CSS or styling

Issues with displaying or hiding a DIV using javascript - popup box unresponsive

Angular - Incorporating Query Parameters into URL

Encountering a 403 Forbidden error while attempting to access a website built with Next.js

Ways to design each element in React

What are the steps to gather user data and generate a roster of individuals currently online?

Tips on incorporating AJAX sorted outcome into HTML divs

Is it possible to incorporate RequireJS in importing VueJS components?

Despite the use of v-if and v-else directives in Vue 2, a specific component properties are not being updated while the others are updating

Tips for saving multipart/form-data using ajax in Laravel 5.6

Improving ASP.NET MVC 4 output by bundling whitespace and formatting

Error message: "Issue encountered when trying to override styles in GWT DataGrid - ImageResource method value('cellTableLoading') not found"

Selenium does not support running Javascript code

Tips for adjusting the size of a v-text-field within a d-flex layout in Vue

Display a different image while another image is in the process of loading

The issue with the autoresize feature in the tinymce plugin arises when trying to delete HTML img content using the backspace

Executing a JavaScript file following an AJAX request in Ruby on Rails

Fundamental modeling using Node.js with Mongoose

Handling errors in Javascript asynchronous functions at the point of invocation

Steps to inserting a div element in the middle of two distinct background designs