Does overflow:hidden applied to <body> work on iPhone Safari?

iphone css ipad safari overflow

174,723

Solution 1

After many days trying, I found this solution that worked for me:

touch-action: none;
-ms-touch-action: none;

Solution 2

I had a similar issue and found that applying overflow: hidden; to both html and body solved my problem.

html,
body {
    overflow: hidden;
}

For iOS 9, you may need to use this instead: (Thanks chaenu!)

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

Solution 3

body {
  position:relative; // that's it
  overflow:hidden;
}

Solution 4

Some solutions listed here had some strange glitches when stretching the elastic scrolling. To fix that I used:

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

Source: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

Solution 5

Had this issue today on iOS 8 & 9 and it seems that we now need to add height: 100%;

So add

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}

View more solutions

174,723

Author by

Francesco

Updated on July 08, 2022

Comments

Francesco almost 2 years

Does overflow:hidden applied to <body> work on iPhone Safari? It seems not. I can't create a wrapper on the whole website to achieve that...

Do you know the solution?

Example: I have a long page, and simply I want to hide the content that goes underneath the "fold", and it should work on iPhone/iPad.
- mwilcox almost 14 years
  
  Desperately searching to find the answer to this myself.
Kevin Borders about 10 years

This doesn't work on iOS Safari. position: relative is also necessary.
wutang almost 10 years

Yes add both relative and overflow to html + body
Eric almost 10 years

THANK. YOU. I had a big issue when elements being transitioned from outside the viewport, to inside. There would occur a strange bug where the content got extended. This was the solution for me!
pjmorse over 9 years

Can you go into more detail with this, or cite a source? This answer might be correct, but it's not very helpful.
LeastOne about 9 years

In my case adding "position: relative" didn't help but adding "position: fixed" worked.
CJT3 over 8 years

this does not work on iOS 9, even using position relative on body and html
tremor over 8 years

@CharlesJohnThompsonIII - verifiable and is there a workaround?
chaenu over 8 years

I could solve my issue today on iOS 9 with adding height: 100%; -> stackoverflow.com/a/34659821/1384441
Alex Haas over 8 years

I've updated my answer above for iOS 9. Thanks guys.
Roel Magdaleno over 8 years

This was the solution for me.
Brett Gregson about 8 years

A word of warning, overflow hidden on the <html> tag will break jQuery's scroll event
suz almost 8 years

2016: height: 100% is making vertical scrolling not smooth; is better to remove it.
moonunit7 over 7 years

Yip this worked. I'm building a site where they want the mobile nav to go over the content - but when it's open the content behind the nav in the background still scroll. The other answers with position, overflow & height also worked but with height the page jumps to the top when I open the nav. I guess it's unique to my situation but just thought I'd mention it in case anyone else with overlaid nav have the same problem.
jmarceli about 7 years

This is nice (works better in my case than position: relative) however, the scroll position is lost after restoring default styling (e.g. closing menu).
Edo about 7 years

This doesn't work for me on iOS 9, Safari. Body still scrollable, also after adding position: relative.
Davey almost 7 years

For scroll position you can use js (jquery in this example) do something like this: // on menu open // save window pos $('body').attr( 'data-pos', $(window).scrollTop() ) ; // ... // on menu close // scroll to saved window pos $( window ).scrollTop( $('body').attr( 'data-pos' ) );
Matt almost 7 years

@Edo I finally got it by doing position: fixed + overflow hidden on body instead of relative. Hope this helps.
Edo almost 7 years

@Matt IIRC we also ran position: fixed for some time, but the downside is that that resets the scroll position.
D.Steinel over 6 years

That really did the tick for me!
Kugel over 6 years

Where does the wrapper go? How is this a complete answer?
kmgdev almost 6 years

height: 100% on both html and body fixed it for me on iOS 11.4.
Badrush almost 6 years

Not a very elegant solution, and will cause issues on iOS devices that are larger than the specific pixels you end up choosing. A different solution should be used.
Jason over 5 years

This causes the page to scroll to top for me when the modal gets closed.
Pons Purushothaman about 5 years

Position: fixed; work me me, not Position: relative;
mike about 5 years

Adding fixed position does address the issue, but it makes the page jump to the top, which is bad for UX if you're implementing this in the background while you present a menu or modal. To make a good UX, you should, before locking position, store the scroll position of the page, and then re-apply it after unlocked.
Arnav Borborah over 4 years

Any updates to this answer? The answer doesn't work for me, even with position: relative.
Iruku Kagika over 4 years

In my case I had to add "width:100%" to get it working
monisha about 4 years

@AlexHaas Neither position:relative nor height:100% works in IOS.. I wanted to stop body scroll when dragging an element in mobile . overflow:hidden works perfectly in Android phones. Is there any work around to solve this
pakman198 about 3 years

Thanks so much for this, I was going crazy with a modal component I was building that blocks scrolling in all browsers except for safari
savram almost 3 years

You rock sir! Thank you!
funky-nd over 2 years

safari is the new ie11
vaskort about 2 years

That didn't work for me on iOS 15.3.1, you used these rules on body right?
vaskort about 2 years

Update on my question: This seems to have worked when I added this in advance and not by using a class that toggles these rules on and off on the body element.
Marc about 2 years

Thank you! This is exactly what I needed. Works like a charm