Overflow-y: hidden issue with iOS with internal scroll div

Question

I create a responsive site that overlays with overlays. The problem is in mobile devices, these overlays should be able to scroll, but I do not want the page to scroll behind it. When the desktop overflows: hidden ones work to stop the page scrolling, but still allow the div to scroll for scrolling. However, on iOS, this property does not work. The base page is still scrolling. I created jsbin below. Can someone tell me how to make the black div scroll on iOS, but prevent the base page from scrolling? It works great on the desktop, but not on the mobile device.

http://jsbin.com/isayuy/4/

thanks

Answer 1

You should add this to your CSS:

html { height:100%; overflow:hidden; } body { height:100%; overflow:hidden; } 

This works for me. See here: http://jsbin.com/isayuy/10/

Answer 2

The solution from @Tim Wasson works for me.

As another option, I am wondering if there is a reason why you are not applying the position: fixed in the body tag when slides are visible?

http://jsbin.com/isayuy/6

Statements if I miss something obvious.

Good luck

Answer 3

Here's what I do - this solution prevents the background from scrolling while maintaining its original position (i.e. it does not go to the beginning).

  preventScroll : function(prevent) { var body = $('body'), html = $('html'), scroll; if (prevent) { var width = body.css('width'); scroll = window.pageYOffset; // This is all you need to do to prevent scroll on everything except iOS. html.css({ 'overflow': 'hidden'}); // For iOS, change it to fixed positioning and make it in the same place as // it was scrolled. // For all systems, change max-width to width; this prevents the page getting // wider when the scrollbar disappears. body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width}); } else { scroll = -parseInt(body.css('top')); html.css({ 'overflow': '' }); body.css({ 'position': '', 'top': '', 'max-width': '' }); window.scrollTo(0, scroll); } }, 

This will cause problems when resizing (turning the phone) while scrolling; I also have a resize event that triggers preventScroll (false) and then preventScroll (true) to update the position in this case.

Answer 4

Yes. it works. and added the following code also

 if (window.location == window.parent.location && navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { $('#orderpop').attr('style', '-webkit-overflow-scrolling: touch !important; overflow-y: scroll !important;'); } preventScroll : function(prevent) { var body = $('body'), html = $('html'), scroll; if (prevent) { var width = body.css('width'); scroll = window.pageYOffset; // This is all you need to do to prevent scroll on everything except iOS. html.css({ 'overflow': 'hidden'}); // For iOS, change it to fixed positioning and make it in the same place as // it was scrolled. // For all systems, change max-width to width; this prevents the page getting // wider when the scrollbar disappears. body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width}); } else { scroll = -parseInt(body.css('top')); html.css({ 'overflow': '' }); body.css({ 'position': '', 'top': '', 'max-width': '' }); window.scrollTo(0, scroll); } }