overflow-y:hidden IOS issue with inner scrolling div

Question

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

Answer 1

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/

Answer 2

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!