iOS safari allows scrolling of body through fixed div

Question

http://jsbin.com/fopiwaluwo/edit?html,css,js

http://output.jsbin.com/fopiwaluwo (full screen output - should be viewed on an iPad/iOS simulator.)

When scrolled to the bottom or top of the scrollable overlay the body also scrolls. I want to disable any scrolling on the body while scrolling on the overlay (white transparent area with copy).

This is a simplified example of the web app I wish to apply this to. I know that adding position: fixed to the body disables the scrolling however I can't use that in the real world example. JavaScript solutions welcome.

Cheers

Sensational

Answer 1

Just add:

<script type="text/javascript">document.ontouchmove=function(event){ event.preventDefault(); }</script>

And behold, body does not scroll, but the overlay does :-)

Update: seems to work on iPhones running iOS 10 only.
Does not work on iPad or iOS 9.

Jezabelle

Hey, thanks for the answer but unfortunately this disabled scroll on the fixed div too :( – Sensational

@Sensational - What do you mean? I added this to your sample (just before the </head>), and the overlay scrolls (the pink part (ok, red with 0.8 alpha) with the "Some scrollable copy right here") scrolls, and the red border remains fixed. Isn't that what you wanted to achieve? – Jezabelle

are you doing this in an iOS simulator? The div with the content also stops scrolling which is not the desired outcome. – Sensational

Tested on iPhone 7 simulator & a real iPhone 6s plus (both iOS 10), downloaded your HTML, and stuck my addition just before the </head>. – Jezabelle

@Sensational - you can test it here: sharkfood.com/test/so , link will be up for a couple of days only. – Jezabelle

update: sorry, only works on iPhones (the ones I tested anyway) running iOS 10, does not seem to work on iPad, or iOS 9. – Jezabelle