Scrolling may make the page jump to the left

[pluspol]

Describe the bug
In a special case scrolling the parent page leads to it jumping to the left.

This happens when:

• a) the parent page has a fully centered layout (using margin 0 auto)
• b) the iframe lies within the centered area
• c) the parent page has an element which breaks free form centering (via something like position: absolute; left: -100vw)

In this case iframe-resizer´ calculates a scroll position like 300,400` which means it wants to scroll horizontally to 300px.

In case of only a) and b) iframe-resizer too tries to scroll horizontally to 300px but nothing happens as the page isn't scrollable at all. Only when adding c) it's possible to scroll programmatically because of the wider element.

This happens in Chrome and Firefox.

Workaround
Luckily it's rather easy to override the scroll behaviour and disable horizontal scrolling to fix this issue:

const [iframe] = iframeResizer({
    scrollCallback: (position) => {
        window.scrollTo({top: position.y});
        return false;
    },
}, rawIframe);

To Reproduce
Steps to reproduce the behavior:
Is there a template for a Codesandbox that can easily be used to provide an example?

Here's the css of the parent page:

    .bg {
        position: relative;
        display: flex;
        flex-direction: row;
        padding: 45px 0;
        width: 100%;
        max-width: 1180px;

        box-sizing: border-box;
    }

    .bg:before {
        position: absolute;
        left: -100vw;
        top: 0;
        width: 200vw;
        height: 100%;
        background-color: red;
        content: " ";
        display: block;
    }

    main {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
    }

And the relevant markup for the parent page:

<main>
    <div class="bg">aaaa</div>
    <div class="iframe-container"></div>
</main>

And the iframe is simply calling something like that:

window.parentIFrame.scrollToOffset(0, 200);

Expected behavior
The page shouldn't jump to the left but stay where it is.

Possible solutions

• a) Fix the behaviour
• b) Allow disabling horizontal scrolling

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS Sonoma
• Browser Chrome, Firefox
• Version Latest

[davidjbradshaw]

Looks like your using a very old version of this library

[pluspol]

No, unfortunately not. We're using the latest version 4.3.9.

[davidjbradshaw]

Just looking at this again and I think your workaround, is the solution. I've added an example into the new version 5 API documentation and the troubleshooting guide.

https://iframe-resizer.com/api/parent/#onscroll
https://iframe-resizer.com/troubleshooting/#srcolling-does-not-scroll-to-where-i-want-it

[davidjbradshaw]

btw in v5 it is now slightly cleaner, as onScroll() now also passes top and left

const [iframe] = iframeResizer({
  scrollCallback: ({ top }) => {
    window.scrollTo({ top });
    return false;
  },
}, rawIframe);