When implementing some form of popup modal or fixed position overlay on a page, you would normally want to prevent the user being able to scroll the background whilst the overlay is active. The default approach to prevent page scroll is to add css overflow:hidden to the page body, as an example let’s take a look at the css of the search form backdrop on this site:

The above css works perfectly fine in all modern browsers and most mobile devices, however in IOS the underlay element will still detect a touchmove event inside the body, triggering momentum scrolling of the page regardless. The only way this can currently be prevented is to use a little javascript:

The above snippet adds an event listener to the element to prevent the default scrolling behaviour. The final parameter “useCapture”  is set to false, this is important so that we stop the event propagating / bubbling up to the body.

If you want, you can achieve the same result using jQuery:

 

Snippet

LEAVE A COMMENT

Notify of
avatar
Sort by:   newest | oldest | most voted
Joe
Joe

Thanks for sharing, this worked great

11 months 6 days ago
wpDiscuz