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

IphoneCssIpadSafariOverflow

Iphone Problem Overview

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.

Iphone Solutions

Solution 1 - Iphone

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 2 - Iphone

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

Solution 3 - Iphone

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 4 - Iphone

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

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

Solution 5 - Iphone

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

Solution 6 - Iphone

Combining the answers and comments here and this similar question here worked for me.

So posting as a whole answer.

Here's how you need to put a wrapper div around your site content, just inside the <body> tag.

 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <!-- other meta and head stuff here -->
 <head>
 <body>
     <div class="wrapper">
         <!-- Your site content here -->
     </div>
 </body>
 </html>

Create the wrapper class as below.

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

I also got the idea from this answer here.

And this answer here also has got some food for thought. Something that probably will work equally good in both desktops and devices.

Solution 7 - Iphone

Its working in Safari browser.

html,
body {
  overflow: hidden;
  position: fixed
}

Solution 8 - Iphone

For me this:

height: 100%; 
overflow: hidden; 
width: 100%; 
position: fixed;

Wasn't enough, i't didn't work on iOS on Safari. I also had to add:

top: 0;
left: 0;
right: 0;
bottom: 0;

To make it work good. Works fine now :)

Solution 9 - Iphone

I've worked with <body>and <div class="wrapper">

When popup opens ...

<body> gets a height of 100% and an overflow:hidden

<div class="wrapper"> gets position:relative;overflow:hidden;height:100%;

I use JS/jQuery to get the actual scrollposition of the page and store the value as data-attribut to body

Then i scroll to the scrollposition in the .wrapper DIV (not in window)

Here is my solution:

JS/jQuery:

// when popup opens

$('body').attr( 'data-pos', $(window).scrollTop()); // get actual scrollpos
$('body').addClass('locked'); // add class to body
$('.wrapper').scrollTop( $('body').attr( 'data-pos' ) ); // let wrapper scroll to scrollpos

// when popup close

$("body").removeClass('locked');
$( window ).scrollTop( $('body').attr( 'data-pos' ));

CSS:

body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}

It works well on both sides ... desktop & mobile (iOS).

Tipps and improvements are welcome :)

Cheers!

Solution 10 - Iphone

html {
  position:relative;
  top:0px;
  left:0px;
  overflow:auto;
  height:auto
}

add this as default to your css

.class-on-html{
  position:fixed;
  top:0px;
  left:0px;
  overflow:hidden;
  height:100%;
}

toggleClass this class to to cut page

when you turn off this class first line will call scrolling bar back

Solution 11 - Iphone

Why not wrap the content you don't want shown in an element with a class and set that class to display:none in a stylesheet meant only for the iphone and other handheld devices?

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->

Solution 12 - Iphone

Yes, this is related to new updates in safari that are breaking your layout now if you use overflow: hidden to take care of clearing divs.

Solution 13 - Iphone

It does apply, but it only applies to certain elements within the DOM. for example, it won't work on a table, td, or some other elements, but it will work on a <DIV> tag.
eg:

<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

    Only tested in iOS 4.3.

    A minor edit: you may be better off using overflow:scroll so two finger-scrolling does work.

Solution 14 - Iphone

Here is what I did: I check the body y position , then make the body fixed and adjust the top to the negative of that position. On reverse, I make the body static and set the scroll to the value I recorded before.

var body_x_position = 0;

function disable_bk_scrl(){

    var elb = document.querySelector('body');

    body_x_position = elb.scrollTop;
    // get scroll position in px

    var body_x_position_m = body_x_position*(-1);
    console.log(body_x_position);

    document.body.style.position = "fixed";

    $('body').css({ top: body_x_position_m });

}

function enable_bk_scrl(){  

    document.body.style.position = "static";

    document.body.scrollTo(0, body_x_position);

    console.log(body_x_position);
}

Solution 15 - Iphone

A CSS keyword value that resets a property's value to the default specified by the browser in its UA stylesheet, as if the webpage had not included any CSS. For example, display:revert on a <div> would result in display:block.

overflow: revert;

I think this will work properly

Solution 16 - Iphone

If you need scroll modal

Modal open

$('body').attr('data-position', $(window).scrollTop());
$('body').css({'overflow' : 'hidden', 'position' : 'fixed'});

Modal close

$('body').css({'overflow' : 'unset', 'position' : 'unset'});
$(window).scrollTop( $('body').attr( 'data-position' ));

Solution 17 - Iphone

My version) Work in iOS

 if (isModalWindowClose) {
        document.querySelector('body').style.overflow = '';
        document.querySelector('html').style.overflow = '';
        
        const scrollY = document.body.style.top;
        
        document.querySelector('html').style.height = '';
        document.body.style.position = '';
        document.body.style.left = '';
        document.body.style.top = '';

        window.scrollTo(0, parseInt(scrollY || '0') * -1);

        document.querySelector('html').style['scroll-behavior'] = '';
    } else {
        document.body.style.top = `-${window.scrollY}px`;
        document.querySelector('html').style.height = `${window.innerHeight - 1}px`;
        
        document.body.style.position = 'fixed';
        document.body.style.left = '0';
        
        document.querySelector('body').style.overflow = 'hidden';
        document.querySelector('html').style.overflow = 'hidden';
        
        document.querySelector('html').style['scroll-behavior'] = 'unset';
    }

Solution 18 - Iphone

Simply change body height < 300px (height of mobile viewport on landspace is around 300px to 500px)

JS

$( '.offcanvas-toggle' ).on( 'click', function() {
    $( 'body' ).toggleClass( 'offcanvas-expanded' );
});

CSS

.offcanvas-expended { /* this is class added to body on click */
    height: 200px;
}
.offcanvas {
    height: 100%;
}
Categories
Recommended Iphone Solutions
Recommended Css Solutions
Recommended Ipad Solutions
Recommended Safari Solutions
Recommended Overflow Solutions

Previous Solution:

How to programmatically display version/build number of target in iOS app?

IphoneXcodeIpadIos Simulator

Next Solution:

In Python script, how do I set PYTHONPATH?

PythonLinuxUnixEnvironment Variables

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFrancescoView Question on Stackoverflow
Solution 1 - IphoneAlex HaasView Answer on Stackoverflow
Solution 2 - IphonelaFunkView Answer on Stackoverflow
Solution 3 - IphoneDaveyView Answer on Stackoverflow
Solution 4 - IphoneEduardo LeiteView Answer on Stackoverflow
Solution 5 - IphonechaenuView Answer on Stackoverflow
Solution 6 - IphoneDevraj GadhaviView Answer on Stackoverflow
Solution 7 - IphoneSridharView Answer on Stackoverflow
Solution 8 - IphoneLoosie94View Answer on Stackoverflow
Solution 9 - IphoneTogeView Answer on Stackoverflow
Solution 10 - IphoneLongwinterView Answer on Stackoverflow
Solution 11 - IphoneS16View Answer on Stackoverflow
Solution 12 - IphoneLee McAlillyView Answer on Stackoverflow
Solution 13 - IphoneadamView Answer on Stackoverflow
Solution 14 - IphoneArie S.View Answer on Stackoverflow
Solution 15 - IphoneVahe NikoghosyanView Answer on Stackoverflow
Solution 16 - IphoneIvan_AkaView Answer on Stackoverflow
Solution 17 - IphoneYuriy VovkView Answer on Stackoverflow
Solution 18 - Iphonekristian lepiView Answer on Stackoverflow