Popup inside iframe, avoid scroll of outer page

This is my situation:

• the html page contains an iframe
• inside the iframe there are some images, and the popup are plugged on these images
• the iframe has an high height, le’ts say 1000px, without a scroll (it occupies the entire page). Boefore the iframe there is other 1000px of content

The problem is that if I click on an image inside the iframe, and the property css ‘top’ of the iframe isn’t 0 (e.g. the iframe starts in the middle of visible page, it doesn’t start from the top of visible page), the page containing the iframe scrolls down , such that the ‘top’ css property of the iframe becomes 0.

The code for putting the popup on is:

$('.image-popup').magnificPopup({
                                    type: 'image',
                                    closeOnContentClick: true,
                                    mainClass: 'mfp-img-mobile',
                                    image: {
                                        verticalFit: true
                                    },
                                    callbacks: {
                                        open: function() {
                                            var magnificPopup = $.magnificPopup.instance;

                                            var iframe = $(".iframe", parent.document.body).first();
                                            var iframeTop = iframe.offset().top
                                            var scrollTop = $(parent.document.body).scrollTop()
                                            var mytop = (scrollTop + 200) - iframeTop

                                            var el
                                            el = magnificPopup.content
                                            el.css('position', 'fixed')
                                            el.css('top', mytop)
                                        },
                                        close: function() {
                                            // Will fire when popup is closed
                                        },
                                        elementParse: function(item) {
                                            item.el.css('width', 100)
                                         }
                                    }

                                });
                            })

I want to avoid that the outer page scrolls down.

[davidcraigmyle]

fixedContentPos: true

[tukvillie]

Changing Both from auto to true worked for me. Thanks

fixedContentPos: “true”, fixedBgPos: “true”,