- Published on
.scrollIntoView() inside iframe causes outside page to scroll
- Authors
- Name
As I've found with many CSS problems, giving up looking for the perfect solution was the most efficient and worthwhile way to go. After a few hours of searching the internet, reading posts about iframes and scrollIntoView, and trying different fixes, I decided that the best way to proceed was to disable scrolling for the calendar on the page with the iframe.
Here are the things I've tried in the process.
1. Finding a CSS solution [Fail]
transform-origin: 0 0;. I initially thought this might be an issue with the fact that I am using thescaleproperty to cause the iframe's contents to appear zoomed out.- different
overflowsettings for iframe and iframe parents. - Adjusting
displayandposition(ex.position: fixed;). These broke other parts of the content styling, so were not feasible. - Using
.scrollIntoView({block: "nearest", inline: "nearest"});. This worked, but it changed the scrolling behaviour for my calendar in all parts of my application, and so I decided against it, as I still wanted the scroll effect for other uses.
2. Using Javascript [Fail]
- I thought it might be interesting if when you navigated to the page, it first scrolled down, so you can see the testimonials section, and then scrolled up again after 2 seconds. I tried this, and decided it felt a bit awkward and unnatural, so I scrapped this idea. Also there is the problem that loading speeds vary with different devices, and the timeout I'd have to wait before scrolling up would vary. Adding any sort of loader or signal to wait for the iframe's content to load first sounded like a lot of work, for something that didn't seem like a good solution in the first place.
- I saw some other Javascript solutions involving using Javascript to change scroll offsets, but I decided this was too invasive of an approach for my purposes, and I am not knowledgeable enough with Javascript and the DOM to transpose that into React. This entire problem was caused by me using Javascript to manipulate the DOM, so I wanted to limit this scenario as much as possible. Also a lot of these solutions involved JQuery. I have linked a few of these below.
3. Option to disable scroll on my calendar [Pass]
Added a prop to disable scrolling for the calendar. The seems like a reasonable thing to add in the first place, and was quite simple to implement. The page showed in the iframe has a specific query parameter that indicates it is in demo mode, so I disabled scrolling in the calendar based on if that parameter was in the query.
Final thoughts
My current method still seems a bit hacky, since involving Next.js' router in the first place seems a bit much for a seemingly simple problem. However, what works works, and I don't have more time to spend on this issue. I did learn more about iframes and scrolling via Javascript through this process, which I am happy about.
Some relevant links
https://stackoverflow.com/questions/48634459/scrollintoview-block-vs-inline https://stackoverflow.com/questions/56688002/javascript-scrollintoview-only-in-immediate-parent
https://stackoverflow.com/questions/20956663/scrollintoview-to-apply-to-iframe-only
Next steps for Planda
- Render Markdown with Next.js, so that Planda will have a blog, and I will be able to post this.
- Fun task completion animations