iOS prevent scrolling on body

Post author By Edward Townend
Post date 24 July 2013
20 Comments on iOS prevent scrolling on body

Ordinarily, overflow: hidden; on the body tag is sufficient to prevent scrolling a web page, if for instance you’re creating a drawer to hold content that will scroll separately. However, this doesn’t work in iOS6. The best I’ve come up with so far is to set position: fixed:

body.lock-position { height: 100%; overflow: hidden; width: 100%; position: fixed; }

Tags css, development, ios

20 replies on “iOS prevent scrolling on body”

Thanks! I’ve been fighting with iOS scrolling for the last week and this is the cleanest, most efficient solution I’ve come across.

<3 Just solved a problem I had been working on for a period of time I'd like to not admit. Most fixes I see out there are involving something along the lines of:


$toggle = $('.navbar-toggle')

    $container = $('.container')

    $('body').toggleClass('overflow-hidden')
   unless $toggle.hasClass 'expanded'

      $toggle.addClass 'expanded'

      $container.bind 'touchmove', (e) -> e.preventDefault()

    else

      $toggle.removeClass 'expanded'

      $container.unbind 'touchmove'

Thanks for the insight 😀

Thanks for this – was banging my head on and off for days with this problem – position: fixed finally made iOS listen.

Good job. Thanks for sharing. (I tested this on iOS 8, iPhone, 4S, 6, 6Plus)

Hi, im using this for a mobile navigation and a gallery overlay. The problem ist when you open one of it, it jumps to the top of the page and thats messy.

THANK YOU!!!!!!

This is so simple, yet never thought of it. Genius, thanks!

Hi,

This works, but with a big drawback… the page always scrolls to the top. Big pain on mobile.

Cheers,

You just SAVED MY LIFE!!! This had been bothering me for days now on a project . . . Thank you!!!!

Problem is, it means the scroll position is set back to the top when applying fixed.

Using position: fixed and height width will affect the original style.
You can try on http://github.com

[…] ios prevent scrolling on body […]

Well done thank you.

There is a problem with this though. The body jumps up automatically.
So for example, if someone opening that drawer, the body will be scrolled up to point 0.

For me this seems to scroll the user all the way to the top of the screen. Is there a solution without this side-effect?

Yep, and scrolls body to top.

Nice discovery! Thank you.
Can you suggest something to keep current window scroll?
It is being reset when setting body to fixed.

Hi Ed,
I tried using your trick to keep the page non scrollable when the menu opens up in mobile. But on the first click of menu, the menu takes up fixed position and it is only on the second click that the menu opens. Please help in knowing what I am doing wrong.
Thanks.

Thank you

Thank you 🙂

Comments are closed.