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 like300,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);