Prevent scrolling on mobile device

[martinb2]

Hi, Please, can you give me advise for prevent scrolling lightbox on mobile device ? When I open http://dimsemenov.com/plugins/magnific-popup/ and try open any image from gallery, or "Load content via ajax", then lightbox window is fixed to page, and I can scroll throughout the site. This happened only on mobile device (Firefox 42.0.2, Chrome 47.0.25.26.76). This is not happened during previewing site on desktop. Lightbox looks really great, I would like to solve this little problem. Thank you

[maxmood]

what type of your phone is ? it might be the preventDefault(). can you show us some pics or code?

[e-anima]

I also can scroll the page. If someone swipes(i know it doesnt support swipe, but if a user does swipe) it will be considered scrolling. then the image loses focus :) i think that is what he meant?

motorola g2 chrome too, android lolipop.

[kylehotchkiss]

Options:

        callbacks: {
            beforeOpen: function() {
                jQuery('body').css('overflow', 'hidden');
            },
            beforeClose: function() {
                jQuery('body').css('overflow', 'auto');
            }
        }

[soniar4i]

@kylehotchkiss sadly this doesn't work on Safari. I'm looking for a solution to this problem :)

[rmarscher]

Mobile Safari is affected by this bug: https://bugs.webkit.org/show_bug.cgi?id=153852 It makes it very difficult to come up with a solution that works across all devices.

[mjcampagna]

@rmarscher

Try applying -webkit-overflow-scrolling: touch; to the body when the modal is closed.

When the modal is open, apply -webkit-overflow-scrolling: auto; to the body, then -webkit-overflow-scrolling: touch; to the modal.

Use the callbacks to set a body class, for example:

body { -webkit-overflow-scrolling: touch; }

body.no-scroll { overflow: hidden; -webkit-overflow-scrolling: auto; }

[SaeedSalam]

@mjcampagna that worked for me, thanks!

There is already a class 'mfp-zoom-out-cur' is adding to body when modal opens, so adding your styles to that class worked.

body {
     -webkit-overflow-scrolling: touch;
}

body.mfp-zoom-out-cur {
     overflow: hidden;
     -webkit-overflow-scrolling: auto;
}

[MartinMuzatko]

It should be a built-in to have the same behavior for mobile. It is really a bummer to have that behavior on mobile. @dimsemenov

[merlinasnakes]

It is no longer possible to apply "-webkit-overflow-scrolling" because browsers are no longer compatible. What worked for me was adding the properties {position: fixed & overflow: auto} to the class .mfp-wrap

.mfp-wrap { position: fixed; overflow: auto; }

With these properties the user will be able to scroll in the div of the popup without this meaning that it will end up doing scrolling on the site below the popup.

[GiorgosK]

This worked for me

.mfp-bg, body.mfp-zoom-out-cur { overflow: hidden !important; margin: 0 !important; padding: 0 !important; height: 100% !important; }

[krisrok]

i can only test ios 9 right now, but what worked for me was a combination of recent posts:

body {
  -webkit-overflow-scrolling: touch;
}

  body.mfp-zoom-out-cur {
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
  }

.mfp-wrap {
  position: fixed;
  overflow: auto;
}

[AmaHacka]

@krisrok @merlinasnakes Prevois solutions with use style:

.mfp-wrap {
     position: fixed;
     overflow: auto;
}

causes new problem when you scroll page little-bit down and then try to open image. In this case your modal window will be marged to the bottom. To prevent this you sould use:

.mfp-zoom-out-cur {
     width: 100%;
     position: fixed;
     overflow: auto;
}
.mfp-wrap {
     top: 0 !important;
}

[petertwise]

.mfp-zoom-out-cur was not showing up for me with the most recent version and my configuration. I had to use the following conglomeration of pretty much all of the code above:

$('.my-popup').magnificPopup({
	type : 'ajax',
	callbacks: {
		beforeOpen: function() {
			$('body').addClass('mfp-active');
		},
		beforeClose: function() {
			$('body').removeClass('mfp-active');
		}
	}
});

and the CSS:

body {
	-webkit-overflow-scrolling: touch;
}
body.mfp-active {
	overflow: hidden;
	-webkit-overflow-scrolling: auto;
	width: 100%;
	position: fixed;
	overflow: auto;
}
body .mfp-wrap {
	position: fixed;
	overflow: auto;
	top: 0 !important;
}

[zdimaz]

None of the methods work on ios !!! overflow: hidden;

**.mfp-wrap { position: fixed; overflow: auto; }

• BAD SOLUTION!**

BODY SCROLL AWERY TIME

[saki75]

Hello all I have almost the same issue using the DIVI gallery module based on Dmitry jquery.magnific-popup.js First, I'm not dev at all, so it must be not correct and have misfunctions I guess, at this moment it fixed my problems (well I hope! style testing on multiple devices). For information

• I'm not using transparency for the background overlay (changed to opacity:1)
• html structure in Divi from elegant themes is not the same as view in Dmitry exemples
• I'm working on a child theme from DIVI So I put for mobile device with media queries in my child css sheet .mfp-wrap, .mfp-bg { top:0!important; position:fixed!important;} because the js write an absolute position and calculate the top and the height and as a class map-zoom-out-cur is add on the body body.mfp-zoom-out-cur{overflow-y: hidden;}

at this moment no scroll available behind the popup on android & iOS devices tested

##update 09 dec 2019 overflow-y:hidden not working on recent safari version iOS…

[shubhamMandavgade]

callbacks: { beforeOpen: function () { this.st.mainClass = this.st.el.attr('data-effect'); }, open: function () { $('html').css('overflow', 'hidden').css('margin-right', '0'); },close:function (){ $('html').css('overflow', 'auto').css('margin-right', '0'); } },

try this one.

[nitori]

Adding fixedContentPos: true option to the mfp setup made the site fixed in all views for me.

[z-spondoms]

thank you @nitori