Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

scrollIntoView to apply to IFRAME only

I have an element inside of a page with scollbars, which is brought into view on page load via JS call to element.scrollIntoView() - and this works fine, as expected.

Now, if I place this page into an IFRAME, the call to element.scrollIntoView() not only brings element inside of iframe to the top of iframe - if the parent page has scrollbars of its own - it scroll the parent page as well to bring the element in question to the top of parent page as well.

I understand this is probably behavior by design, but is there a way to contain "scrollIntoView" behavior to the IFRAME only, or are there any alternatives to have this behavior (without affecting the parent page).

like image 667
Yuriy Galanter Avatar asked Jan 06 '14 18:01

Yuriy Galanter


People also ask

How do I scroll with an iframe?

To scroll an iframe with JavaScript, we can use the scrollTo method. const myIframe = document. getElementById("iframe"); myIframe. onload = () => { myIframe.

When should I use scrollIntoView?

The scrollIntoView() method scrolls an element into the visible area of the browser window.


1 Answers

Figured it out. I can set element's parent's scrollTop to element's own offsetTop. This will make parent scroll to element's position and effect will be local to IFRAME.

like image 194
Yuriy Galanter Avatar answered Sep 28 '22 05:09

Yuriy Galanter