Categories
Code Web Design

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;
}

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 😀

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.

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?

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.

Comments are closed.