As I load a page(A) inside an iframe, the HTML structure of the embedded content is as follows:
<html><body>
<div id="div1"></div>
<div id="div2"><button>Hello</button></div>
</body></html>
The iframe is included in the parent page like this:
<html><body>
<iframe src="pageA.html" height="200px"></iframe>
</body></html>
In this setup, div2 remains fixed at the bottom of the page while div1 has a scrollable overflow. Upon clicking the button within div2, new content is added to div1.
To ensure that the newly appended content in div1 is visible within the iframe, there is a need to scroll down div1 to its bottommost position. How can this be achieved?
Edit: I have implemented a solution in a JSFiddle. The approach works when viewing the HTML directly in a browser but doesn't seem to function correctly when loaded within a fixed-height iframe.