We all know that we should avert the use of iframe, but sometimes, we have no choice but to use it.
Assumptions were made that you know what is postmessage and how to use it, so if you are not familiar with it, read this this introduction to postmessage before moving on.
At first I want you to know as we need to run js on websites within and outside the child iframe so this method can only be used when you have administration privilege on both sides.

Let’s see what we can do with this method.

As you can see, informations about the scrollTop and height of the child iframe is transfered to the parent component so we can tell whether or not the child iframe is scrolled to top or bottom.

To achieve this, we had to run the following javascript inside the website which is shown inside the iframe.

Basically, the above code does 3 thing.

1. Set up a handler listening to the incoming message sent from the parent container through postmessage.
2. Set up a handler listening to the scrolling event and send scrollTop to the parent container at appropriate time.
3. Send height to the parent container;

Now let’s move to the parent side.

Firstly, send() is continuously invoked to establish connection with the child iframe in componentDidMount until a reply is recieved.
Then monitor the scrollTop and height attribute of the child iframe inside the msgHandler.
Having known the scrollTop and height, we can tell if the user scrolls to the top or bottom by comparing those two attributes.