Develop Reference

Scroll content of iframe with main window scrollbar

Here is the example page that I'm working with:
https://www.midstory.org/toledos-water-issue-is-an-affordability-issue-too/
I have an iframe with an embedded storymap article on our WordPress site. The storymap article is meant to appear to be seamless with the rest of the website, filling the whole viewport and scrolling as if it were part of the main page. The problem is that, as you can see in the link, there are two scrollbars on the right-hand side. Because below the embedded article we have the comments box and footer for the website, which needs to be able to be scrolled to after the user reaches the bottom of the embedded article.
The current solution "works" but looks pretty cludgy. Is there a way to scroll the iframe article with the main scrollbar and then have it scroll the rest of the main page once reaching the bottom of the embedded article?
One idea I have is to make the embedded window fixed in the viewport and make the main article the height of the embedded one. Then I can scroll the page. But there's two problems:
How do I get the height of the embedded article?
How would I control the scroll position of the embedded article from the main one?

Cannot scroll past iframe on iOS/Safari

I've got an iframe embedded somewhere halfway down my page that's 100% of the width and height of the screen.
In mobile Safari I can scroll down the page to where the iframe is in regular fashion (finger swipe up). However, as soon as the iframe fills the screen I can no longer scroll. This is of course because all the pointer events are being captured by the iframe.
Is there any way around this? I know events can't bubble up from iframes to their container divs and that there's no way to interact with iframe css cross-domain.
Importantly, the iframe has interactive content so I still need click events to work on it. In other words, putting a transparent div over the iframe won't work either.
Any thoughts?

I have a tall page with a modal that is displayed within a very tall iframe. How can I position the modal so that it is on screen?

I'm using the Bootstrap modal on many buttons on the page. If I scroll down the page and click a button, naturally the modal will open visibly at the top of the window (not the document). All is well.
However, I want to be able to support the same functionality within very tall iframes. Let's say an iframe is 1000px tall. If I scroll down the top level document to say, halfway down the iframe, but I did not scroll the contents of the iframe at all, I'm running into an issue. If I click a button, the javascript thinks no scrolling has been done, and renders the modal at the top of the iframe document. Thus the modal is not on screen (I have to scroll the top-level document up in order to see it).
Assuming that the parent window and iframe contents are on different domains (so same origin policy applies), is there any way for me to detect where to position the modal so that it's always viewable without scrolling the parent or iframe documents?

You can use this code snippet. Modal will we shown 60px bellow the top edge of user's viewport. And if content of modal is taller, than user's screen he will be able just to scroll the page to see it. But modal should have position: absolute
$("#showPopup").click(function() {
var posX = 60 + $(window).scrollTop();
$("#popupToShow")
.css({top: posX} )
.fadeIn(150);
});

Position Alertbox in middle of scrolled iframe

I developed a website which is used on an other domain in an iframe.
The page is very long (a lot of pictures) and scrolled from the parent.
Now i want to display a alert box in the middle of the maybe scrolled frame, how could that be done?

How to scroll down the scroll bar which in DIV tags with in my web page

I have a requirement on may that, i need to work the scroll bar which in tag on my page. See attached.
To access main scroll bar, i can execute java script code - window.scrollBy(), but how do i access the inner scroll bar which is DIV tag.
Note : Inner scroll bar is not in frame, also not in separate window on the page.
See attached.

Are you trying to test the scrolling mechanism or access an object off screen by scrolling to it?
To access an object by scrolling you can use the "locationOnceScrolledIntoView" method on the element
If you are trying to test the scrolling mechanism, then unless the scrolling is a bespoke implementation, I would advise against it. You would simply be proving a browser can scroll, which has been tested many times before!