Funktioniert Überlauf: versteckt auf <body> auf iPhone Safari?

131

Hat overflow:hiddenangewendet <body>Arbeit auf dem iPhone Safari? Es scheint nicht. Ich kann nicht auf der gesamten Website einen Wrapper erstellen, um dies zu erreichen ...

Kennen Sie die Lösung?

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

iphone css ipad safari overflow Francesco
quelle

1

Ich suche verzweifelt nach einer Antwort darauf.

mwilcox

115

Ich hatte ein ähnliches Problem und stellte fest, dass ich mich overflow: hidden;auf beide bewarb htmlund bodymein Problem löste.

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

Alex Haas
quelle

12

Dies funktioniert unter iOS Safari nicht. Position: Verwandter ist auch notwendig.

Kevin Borders

5

Ja, füge sowohl relative als auch Überlauf zu HTML + Körper hinzu

wutang

3

Dies funktioniert nicht unter iOS 9, auch wenn die Position relativ zu Körper und HTML verwendet wird

Charles John Thompson III

1

Ein Wort der Warnung, Überlauf auf dem <html> -Tag versteckt wird jQuery Scroll-Ereignis brechen

Brett Gregson

2

Dies funktioniert bei iOS 9, Safari nicht. Körper auch nach dem Hinzufügen noch scrollbar position: relative.

Edo

87

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

laFunk
quelle

3

DANKEN. SIE. Ich hatte ein großes Problem beim Übergang von Elementen von außerhalb des Ansichtsfensters nach innen. Es würde einen seltsamen Fehler geben, bei dem der Inhalt erweitert wurde. Das war die Lösung für mich!

Eric

48

In meinem Fall hat das Hinzufügen von "position: relative" nicht geholfen, aber das Hinzufügen von "position: fixed" hat funktioniert.

LeastOne

1

Ja, das hat funktioniert. Ich erstelle eine Site, auf der das mobile Navigationssystem den Inhalt überprüfen soll. Wenn es jedoch geöffnet ist, wird der Inhalt hinter dem Navigationsgerät im Hintergrund immer noch gescrollt. Die anderen Antworten mit Position, Überlauf und Höhe haben ebenfalls funktioniert, aber mit der Höhe springt die Seite nach oben, wenn ich das Navi öffne. Ich denke, es ist einzigartig für meine Situation, aber ich dachte nur, ich würde es erwähnen, falls jemand anderes mit überlagertem Navi das gleiche Problem hat.

Mondeinheit7

Wohin geht die Verpackung? Wie ist das eine vollständige Antwort?

Kugel

8

Durch Hinzufügen einer festen Position wird das Problem behoben , aber die Seite springt nach oben, was für UX schlecht ist, wenn Sie dies im Hintergrund implementieren, während Sie ein Menü oder ein Modal anzeigen. Um eine gute UX zu erstellen, sollten Sie vor dem Sperren die Bildlaufposition der Seite speichern und nach dem Entsperren erneut anwenden.

Mike

27

Einige der hier aufgeführten Lösungen hatten einige 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/

Davey
quelle

4

Dies ist nett (funktioniert in meinem Fall besser als position: relative), jedoch geht die Bildlaufposition nach dem Wiederherstellen des Standardstils (z. B. Schließen des Menüs) verloren.

Jmarceli

1

Für die Bildlaufposition können Sie js (in diesem Beispiel jquery) verwenden, um Folgendes zu tun:

// 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' ) );

Davey

Das hat mir wirklich geholfen!

D.Steinel

8

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

Also hinzufügen

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

Chaenu
quelle

4

Das Kombinieren der Antworten und Kommentare hier und dieser ähnlichen Frage hier hat bei mir funktioniert.

Also als ganze Antwort posten.

Hier erfahren Sie, wie Sie einen Wrapper div um den Inhalt Ihrer Website direkt innerhalb des <body>Tags platzieren.

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

Ich habe auch die Idee von dieser Antwort hier .

Und diese Antwort hier hat auch einige Denkanstöße. Etwas, das wahrscheinlich sowohl auf Desktops als auch auf Geräten gleich gut funktioniert.

Devraj Gadhavi
quelle

Das war die Lösung für mich.

Roel Magdaleno

1

Dadurch wird die Seite für mich nach oben gescrollt, wenn das Modal geschlossen wird.

Jason

4

Es funktioniert im Safari-Browser.

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

Sridhar
quelle

4

Für mich das:

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

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

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

Damit es gut funktioniert. Funktioniert jetzt gut :)

Loosie94
quelle

2

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

Wenn das Popup geöffnet wird ...

<body> bekommt eine Höhe von 100% und einen Überlauf: versteckt

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

Ich verwende JS / jQuery, um die tatsächliche Bildlaufposition der Seite abzurufen und den Wert als Datenattribut für den Body 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 gut auf beiden Seiten ... Desktop & Mobile (iOS).

Tipps und Verbesserungen sind willkommen :)

Prost!

Toge
quelle

1

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

Fügen Sie dies standardmäßig zu Ihrem CSS hinzu

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

toggleClass diese Klasse, um Seite zu schneiden

Wenn Sie diese Klasse ausschalten, wird in der ersten Zeile die Bildlaufleiste zurückgerufen

Langer Winter
quelle

0

Ja, dies hängt mit neuen Updates in Safari zusammen, die Ihr Layout jetzt beschädigen, wenn Sie den Überlauf verwenden: versteckt, um das Löschen von Divs zu erledigen.

Lee McAlilly
quelle

10

Können Sie hier näher darauf eingehen oder eine Quelle angeben? Diese Antwort mag richtig sein, ist aber nicht sehr hilfreich.

pjmorse

0

Es gilt zwar, aber nur für bestimmte Elemente im DOM. Beispielsweise funktioniert es nicht für eine Tabelle, td oder andere Elemente, aber für ein <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.

Eine kleine Änderung: Möglicherweise ist es besser, wenn Sie den Überlauf verwenden: Scrollen, damit das Scrollen mit zwei Fingern funktioniert.

Adam
quelle

0

Warum nicht den Inhalt, den Sie nicht in einem Element display:noneanzeigen möchten, mit einer Klasse umschließen und diese Klasse in einem Stylesheet festlegen, das nur für das iPhone und andere Handheld-Geräte bestimmt ist?

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

S16
quelle

0

Folgendes habe ich getan: Ich überprüfe die Position des Körpers y, mache den Körper fest und stelle die Oberseite auf das Negativ dieser Position ein. Umgekehrt mache ich den Körper statisch und setze den Bildlauf 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);
}

Arie S.
quelle

-3

Ändern Sie einfach die Körpergröße <300px (die Höhe des mobilen Ansichtsfensters im Landraum beträgt ca. 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%;
}

kristian lepi
quelle

Keine sehr elegante Lösung und führt auf iOS-Geräten zu Problemen, die größer sind als die von Ihnen ausgewählten Pixel. Eine andere Lösung sollte verwendet werden.

Badrush

Funktioniert Überlauf: versteckt auf <body> auf iPhone Safari?

Antworten: