it-swarm.com.de

Wird Überlauf: ausgeblendet für <body> auf iPhone Safari angewendet?

Funktioniert overflow:hidden für <body> auf iPhone Safari? Es scheint nicht ... Ich kann auf der gesamten Website keinen Wrapper erstellen, um dies zu erreichen ...

Kennen Sie die Lösung?

Beispiel: Ich habe eine lange Seite, und ich möchte einfach den Inhalt ausblenden, der unter der "Falte" liegt, und er sollte auf dem iPhone/iPad funktionieren.

101
Francesco

Ich hatte ein ähnliches Problem und stellte fest, dass die Anwendung von overflow: hidden; auf html und body mein Problem gelöst hat.

html,
body {
    overflow: hidden;
} 

Für iOS 9 müssen Sie möglicherweise Folgendes verwenden: (Danke, Chaenu!)

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}
90
Alex Haas
body {
  position:relative; // that's it
  overflow:hidden;
}
63
laFunk

Einige der hier aufgeführten Lösungen hatten seltsame Störungen beim Dehnen des elastischen Bildlaufs. Um das zu beheben habe ich verwendet: 

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

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

19
Davey

Hatte dieses Problem heute auf iOS 8 und 9 und es scheint, dass wir jetzt die Höhe hinzufügen müssen: 100%;

So hinzufügen

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

Die Antworten und Kommentare hier zu kombinieren und diese ähnliche Frage hier arbeitete für mich.

Also als ganzes Beitrag posten.

Im Folgenden wird beschrieben, wie Sie einen Wrapper-Div innerhalb des <body>-Tags in den Inhalt Ihrer Website einfügen.

 <!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>

Erstellen Sie die Wrapper-Klasse wie folgt.

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

Die Idee kam mir auch von diese Antwort hier .

Und diese Antwort hier hat auch Denkanstöße. Etwas, das wahrscheinlich auf Desktops und Geräten gleichermaßen gut funktioniert.

4
Devraj Gadhavi

Es funktioniert im Safari-Browser.

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

Für mich das:

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

War nicht genug, ich habe auf Safari auf iOS nicht gearbeitet. Ich musste auch hinzufügen:

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

Damit es gut funktioniert. Funktioniert jetzt gut :)

1
Loosie94

Warum sollte man nicht den Inhalt, der nicht in einem Element angezeigt werden soll, mit einer Klasse umschließen und diese Klasse in einem Stylesheet auf display:none setzen, das nur für das iPhone und andere Handheld-Geräte gedacht ist?

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

Ich habe mit <body>und <div class="wrapper"> gearbeitet

Wenn sich das Popup öffnet ...

<body> erhält eine Höhe von 100% und einen Überlauf: ausgeblendet 

<div class="wrapper"> erhält Position: relativ; Überlauf: versteckt; Höhe: 100%;

Ich verwende JS/jQuery, um die aktuelle Bildlaufposition der Seite abzurufen und den Wert als Datenattribut zum Hauptteil zu speichern

Dann scrolle ich zur Scrollposition im .wrapper DIV (nicht im Fenster)

Hier ist meine Lösung:

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

Es funktioniert auf beiden Seiten gut ... Desktop & Mobile (iOS).

Tipps und Verbesserungen sind willkommen :)

Prost!

1
Tobias Gerlach

Ja, dies bezieht sich auf neue Updates in Safari, die Ihr Layout jetzt brechen, wenn Sie overflow: hidden verwenden, um Divs zu löschen. 

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

fügen Sie dies als Standard zu Ihrer CSS hinzu

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

toggleClass diese Klasse, um die Seite auszuschneiden

wenn Sie diese Klasse ausschalten, wird die Bildlaufleiste wieder aufgerufen

0
Longwinter

Folgendes habe ich getan: Ich überprüfe die y-Position des Körpers, mache dann den Körper fest und stelle das Oberteil auf das Negativ dieser Position ein. Umgekehrt mache ich den Körper statisch und setze die Schriftrolle auf den Wert, den ich zuvor aufgezeichnet habe.

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);
}
0
Arie S.

Es gilt zwar, gilt jedoch nur für bestimmte Elemente im DOM. Zum Beispiel funktioniert es nicht bei einer Tabelle, td oder anderen Elementen, aber bei einem <DIV> -Tag.
z.B:

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

Nur in iOS 4.3 getestet.

Ein kleinerer Schnitt: Mit Überlauf ist es besser, wenn Sie so scrollen, dass das Scrollen mit zwei Fingern funktioniert.

0
adam

Ändern Sie einfach die Körpergröße <300px (die Höhe des mobilen Viewports auf dem Landspace beträgt etwa 300px bis 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%;
}
0
kristian lepi