How to synchronize scrolling positions for several iframes

Synchronizing scroll positions across multiple iframes is commonly used to create a linked view effect, where scrolling in one iframe influences others. This can be achieved using JavaScript. Below are the steps and an example to implement this functionality:

Step 1: Listen for scroll events

First, add scroll event listeners to each iframe. Track the scroll position when a user scrolls in any iframe.

javascript
window.addEventListener('load', function() {
    var iframes = document.querySelectorAll('iframe');
    iframes.forEach(function(iframe) {
        iframe.contentWindow.addEventListener('scroll', function() {
            syncScroll(iframe);
        });
    });
});

Step 2: Define the syncScroll function

When a scroll event is detected, define a function to synchronize the scroll positions of all other iframes with the one that triggered the event.

javascript
function syncScroll(sourceIframe) {
    var x = sourceIframe.contentWindow.scrollX;
    var y = sourceIframe.contentWindow.scrollY;

    var iframes = document.querySelectorAll('iframe');
    iframes.forEach(function(iframe) {
        if (iframe !== sourceIframe) {
            iframe.contentWindow.scrollTo(x, y);
        }
    });
}

Step 3: Handle cross-origin issues

If an iframe loads cross-origin content, the browser's same-origin policy prevents access to contentWindow properties. Therefore, ensure all iframes adhere to the same-origin policy, or use the postMessage method for cross-origin communication.

Example

Assume we have three iframes, each loading content from the same domain. Implement event listeners and scroll synchronization as shown in the example above.

html
<iframe src="page1.html" id="iframe1"></iframe>
<iframe src="page2.html" id="iframe2"></iframe>
<iframe src="page3.html" id="iframe3"></iframe>

<script>
// Above JavaScript code
</script>

Ensure all iframes have similar content heights for a more consistent and smooth scrolling experience.

Conclusion

This approach effectively synchronizes scroll positions across multiple iframes, providing a more cohesive and consistent user experience. In practice, also consider performance optimization to avoid issues from overly frequent scroll event handling.