Common ways to implement shared scrollbars for iframe parent-child page

introduction

During the development process, sometimes it is necessary to use an iframe to reuse the page content under different domain names. To provide a coherent user experience, it is often necessary to share scrolling positions between the main page (parent page) and the iframe child page. When the user scrolls in the parent page, we want the scrollbar of the child page to move to the same position accordingly. This article will introduce one of the more common methods, namely, usingpostMessageto realize communication between parent-child pages, thereby achieving scroll synchronization.

Basic Principles

1. Hide the scrollbar of the iframe

We can use the iframe attributeframeborder="0"andscrolling="no"To hide the scrollbar of the iframe, thereby avoiding the appearance of double scrollbars of the page embedded in the iframe.

<iframe src="" frameborder="0" scrolling="no"></iframe>

2. Use sticky sticky to fix the subpage

After the iframe has set the above attributes, the child page cannot scroll, and as the parent page scrolls, the child page will also scroll up, which is not the effect we want. Therefore, you need to use the sticky sticky positioning of the CSS subpage to be fixed and top rises to the top.

<style>
    .container{
        width: 100%;
        min-height: 1500px;
        position: relative;
    }
    iframe{
        position: sticky;
        top: 0;
        width: 100%;
        height: 900px;
        overflow: hidden;
    }
</style>
 <div class="container">
    <iframe src="" frameborder="0" scrolling="no"></iframe>
</div>

3. Implement parent-child page scrolling linkage through postMessage communication

We can pass the scrolling information to the child page by listening to the scrolling event of the parent page. The child page can obtain scrolling information by listening to the postMessage event of the parent page, and manually trigger the scrolling event, thereby realizing scrolling linkage.

Parent page code:

 = function(){
    ('iframe').({'scrollTop':},'*');
}

Subpage code:

('message', function (event) {
    (0,);
});

Complete code

Parent page:

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;parent&lt;/title&gt;
&lt;/head&gt;
&lt;style&gt;
    body{
        padding: 0;
        margin: 0;
    }
    .container{
        width: 100%;
        min-height: 1500px;
        position: relative;
    }
    iframe{
        position: sticky;
        top: 0;
        width: 100%;
        height: 900px;
        overflow: hidden;
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;iframe src="" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;script&gt;
    // Listen to message events    ('message', function(event) {
        ('.container'). =  + 'px';
        ('iframe'). =  + 'px';
    },false);
    
     = function(){
        ('iframe').({'scrollTop':},'*');
    }
&lt;/script&gt;
&lt;/html&gt;

Subpage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>son</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100%;
        height: 30vw;
        border-bottom:#000 solid 1px;
        background: #f5f5f5;
        line-height: 30vw;
        text-align: center;
    }
</style>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
</body>
<script>
    function sendMessage(){
        ({
            sendHeight: true,
            message: ,
        }, '*')
    }
    sendMessage();
    ('message', function (event) {
        (0,);
        sendMessage();
    });
</script>
</html>

This is the article about common methods for implementing shared scroll bars for iframe parent-son pages. For more related scroll bar content on iframe parent-son pages, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!