I have come across similar questions here, but the solutions provided didn't work for me. The issue is that I embedded a page within a website and it's showing double scroll bars - one inside the iframe and another on the main page. I want to get rid of the scroll bar within the iframe and make it extend to 100% of the iframe while using only the scroll bar on my page. This way, it will be seamless and not obvious that it's an embedded page. I am currently using Bootstrap's iframe embed class for responsiveness, but I don't mind getting rid of it if necessary. Here is the HTML code:
<div class="container">
<div class="main">
<div class="inner-main">
<h1>Page Heading</h1>
<div class="row">
<div class="col-lg-12">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="mylink"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
Is there a simple solution to achieve this? The content on the embedded page is long, so I need it to push my page down completely.
This is what I implemented:
<iframe onload="scroll(0,0);" class="embed-responsive-item" src="mylink"></iframe>
CSS
.embed-responsive-16by9 {
height: 6060px;
}
iframe {
width: 100%;
display: block;
height: 6060px;
}
I will continue exploring for a better approach to handle this situation.