Best IT Recipes

Overflow: hidden, applied to <body>, works on iPhone Safari?

Does overflow:hidden on <body> on iPhone Safari? No, it seems. I can not create a wrapper on the whole site to achieve this ...

Do you know a solution?

Example: I have a long page, and I just want to hide the content that is under the “fold”, and it should work on the iPhone / iPad.

+101
css safari iphone ipad overflow
Jun 15 '10 at 16:58
source share
13 answers

I had a similar problem, and I found that using overflow: hidden; for 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%; }
+90
Aug 03 '13 at 21:30
source share
 body { position:relative; // that it overflow:hidden; }
+60
Nov 30
source share

Some of the solutions listed here had some strange crashes when stretching the elastic scroll. To fix this, 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/

+19
Jan 25 '17 at 11:14
source share

This problem has today on iOS 8 and 9, and it seems that we now need to add height: 100%;

So add

 html, body { position: relative; height: 100%; overflow: hidden; }
+7
Jan 07 '16 at 16:07 on
source share

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

So, send as a whole answer.

Here's how you need to put a wrapper div around the contents of your site, only inside the <body> .

  <!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 a wrapper class as shown below.

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

I also got this idea from here .

And this answer here also got some food for thought. Something that is likely to work equally well on both desktops and devices.

+4
Jun 11 '15 at 13:01
source share

Works in the Safari browser.

 html, body { overflow: hidden; position: fixed }
+2
Nov 15 '17 at 9:57
source share

Why not wrap the content that you do not want to show in the element with the class, and set this class to display:none in a stylesheet designed only for 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]-->
+1
Jan 16 2018-11-11T00:
source share

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

When a popup opens ...

<body> gets 100% height and overflow: hidden

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

I use JS / jQuery to get the actual page scroll and save the value as a data attribute for the body

Then I view the scroll in the .wrapper DIV (not in the 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 and mobile (iOS).

Hints and improvements are welcome :)

Hurrah!

+1
Nov 08 '17 at 22:38
source share

For me it:

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

This was not enough, I did not work on iOS in Safari. I also had to add:

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

To make it work well. Now it works fine :)

+1
Dec 18 '17 at 18:45
source share

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

0
May 03 '11 at 15:52
source share

This applies, but only applies to certain elements in the DOM. for example, it will not 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;"/>

Verified only in iOS 4.3.

Minor editing: you might be better off using overflow: scroll to scroll your finger.

0
Aug 20 '11 at 17:59
source share
 html { position:relative; top:0px; left:0px; overflow:auto; height:auto }

add this as default in your css

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

toggleClass this class to cut page

when you disconnect this class, the first line will call the scroll bar back

0
Jul 27 '17 at 9:59 on
source share

Just change the height of the body <300 pixels (the height of the mobile viewport on the landscape space is from 300 to 500 pixels)

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%; }
0
Jan 19 '18 at 10:40
source share


More articles:


All Articles