Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

overflow-y:hidden IOS issue with inner scrolling div

I am building a responsive site that has overlays slide out from the side. The issue is on mobile these overlays need to be able to scroll but i dont want the page behind to scroll. On desktop setting overflow:hidden works to stop the page from scrolling but still allow the slide out div to scroll. However, in IOS this property is not working. The base page is still scrollable. I have created a jsbin below. Can someone tell me how to get the black div to scroll on IOS but prevent the base page from scrolling? It works fine on desktop but not on mobile.

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

Thanks

like image 887
Scoota P Avatar asked Jun 25 '13 21:06

Scoota P


Video Answer


2 Answers

You have to add this to your CSS:

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

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

like image 73
Tim Wasson Avatar answered Nov 14 '22 21:11

Tim Wasson


The solution from @Tim Wasson works for me.

As another option, I'm wondering if there's a reason why you don't apply position:fixed to the body tag when the slide-outs are visible?

http://jsbin.com/isayuy/6

Appologies if I'm missing something obvious.

Good luck!

like image 38
David Taiaroa Avatar answered Nov 14 '22 22:11

David Taiaroa