Czy overflow: hidden zastosowane do <body> działa na iPhonie Safari?


133

Ma overflow:hiddenzastosowanie do <body>pracy na iPhone Safari? Wydaje się, że nie. Nie mogę utworzyć opakowania na całej witrynie, aby to osiągnąć ...

Czy znasz rozwiązanie?

Przykład: Mam długą stronę i po prostu chcę ukryć zawartość znajdującą się pod „zakładką” i powinna działać na iPhonie / iPadzie.


2
Desperacko szukam odpowiedzi na to pytanie.
mwilcox

Odpowiedzi:


116

Miałem podobny problem i stwierdziłem, że dotyczy overflow: hidden;to obu, htmli bodyrozwiązałem mój problem.

html,
body {
    overflow: hidden;
} 

W przypadku iOS 9 może być konieczne użycie tego zamiast tego: (Dzięki chaenu!)

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

13
To nie działa w iOS Safari. pozycja: względna jest również konieczna.
Kevin Borders

5
Tak, dodaj do html + body zarówno wartość względną, jak i przepełnienie
wutang

3
to nie działa na iOS 9, nawet używając pozycji względnej w treści i html
Charles John Thompson III,

1
Słowo ostrzeżenia, przepełnienie ukryty w znaczniku <html> złamie jQuery przewijania zdarzenie
Brett Gregson

2
To nie działa dla mnie na iOS 9, Safari. Ciało nadal przewijalne, również po dodaniu position: relative.
Edo

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

3
PODZIĘKOWAĆ. TY. Miałem duży problem, gdy elementy były przenoszone z zewnątrz rzutni do wewnątrz. Wystąpiłby dziwny błąd, w którym zawartość została rozszerzona. To było rozwiązanie dla mnie!
Eric

49
W moim przypadku dodanie „pozycja: względna” nie pomogło, ale dodanie „pozycji: ustalona” zadziałało.
LeastOne

1
Yip, to zadziałało. Buduję witrynę, w której chcą, aby nawigacja mobilna przeglądała zawartość - ale kiedy jest otwarta, zawartość za nawigacją w tle nadal przewija się. Inne odpowiedzi z pozycją, przepełnieniem i wysokością również działały, ale wraz z wysokością strona przeskakuje na górę, gdy otwieram nawigację. Wydaje mi się, że jest to unikalne dla mojej sytuacji, ale pomyślałem, że wspomnę o tym na wypadek, gdyby ktoś inny z nałożoną nawigacją miał ten sam problem.
moonunit7

Gdzie idzie opakowanie? Jak to jest pełna odpowiedź?
Kugel

9
Dodawanie ustaloną pozycję ma rozwiązać problem, ale to sprawia, że strony Przejdź do góry, co jest złe dla UX jeśli wdrożenie tego w tle podczas przedstawienia menu lub modalnej. Aby uzyskać dobry UX, przed zablokowaniem pozycji należy zapisać pozycję przewijania strony, a następnie ponownie zastosować ją po odblokowaniu.
mike

29

Niektóre wymienione tutaj rozwiązania miały dziwne błędy podczas rozciągania elastycznego przewijania. Aby naprawić, którego użyłem:

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

Źródło: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/


4
To fajne (w moim przypadku działa lepiej niż position: relative), jednak pozycja przewijania jest tracona po przywróceniu domyślnego stylu (np. Zamknięcie menu).
jmarceli

2
Jako pozycję przewijania możesz użyć js (w tym przykładzie jquery) zrób coś takiego: // 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

To naprawdę działało na mnie!
D.Steinel

8

Mieliśmy ten problem dzisiaj na iOS 8 i 9 i wydaje się, że teraz musimy dodać wysokość: 100%;

Więc dodaj

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

4

Połączenie odpowiedzi i komentarzy tutaj i tego podobnego pytania tutaj zadziałało.

A więc publikowanie jako pełna odpowiedź.

Oto, jak należy umieścić opakowujący element DIV wokół treści witryny, tuż wewnątrz <body>tagu.

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

Utwórz klasę opakowania jak poniżej.

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

Pomysł zrodził się również z tej odpowiedzi .

I ta odpowiedź jest tutaj również ma coś do jedzenia do myślenia. Coś, co prawdopodobnie będzie działać równie dobrze zarówno na komputerach stacjonarnych, jak i urządzeniach.


To było dla mnie rozwiązanie.
Roel Magdaleno

1
Powoduje to, że strona jest przewijana do góry po zamknięciu modalu.
Jason

4

Działa w przeglądarce Safari.

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

4

Dla mnie to:

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

To nie wystarczyło, nie działałem na iOS w Safari. Musiałem też dodać:

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

Aby to działało dobrze. Teraz działa dobrze :)


2

Pracowałem z <body>i<div class="wrapper">

Kiedy otwiera się wyskakujące okienko ...

<body> uzyskuje wysokość 100% i przepełnienie: ukryty

<div class="wrapper"> pobiera pozycję: względną; przepełnienie: ukryte; wysokość: 100%;

Używam JS / jQuery, aby uzyskać rzeczywistą pozycję przewijania strony i zapisać wartość jako atrybut danych do treści

Następnie przewijam do pozycji przewijania w .wrapper DIV (nie w oknie)

Oto moje rozwiązanie:

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

Działa dobrze po obu stronach ... komputer stacjonarny i mobilny (iOS).

Napiwki i ulepszenia są mile widziane :)

Twoje zdrowie!


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

dodaj to jako domyślne do twojego css

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

toggleClass tę klasę, aby wyciąć stronę

kiedy wyłączysz tę klasę, pierwsza linia przywoła pasek przewijania z powrotem


0

Tak, jest to związane z nowymi aktualizacjami w Safari, które teraz psują twój układ, jeśli używasz overflow: hidden, aby zająć się czyszczeniem div.


10
Czy możesz podać więcej szczegółów lub zacytować źródło? Ta odpowiedź może być poprawna, ale nie jest zbyt pomocna.
pjmorse

0

Ma zastosowanie, ale dotyczy tylko niektórych elementów w DOM. na przykład nie będzie działać z tabelą, td lub innymi elementami, ale będzie działać ze znacznikiem <DIV>.
na przykład:

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

Testowany tylko w iOS 4.3.

Drobna zmiana: możesz lepiej użyć overflow: scroll, aby przewijanie dwoma palcami działało.


0

Dlaczego nie zawinąć treści, której nie chcesz wyświetlać w elemencie, klasą i ustawić tę klasę display:nonew arkuszu stylów przeznaczonym tylko dla iPhone'a i innych urządzeń przenośnych?

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

0

Oto, co zrobiłem: sprawdzam pozycję ciała y, następnie mocuję ciało i dopasowuję górę do ujemnej pozycji. Na odwrocie ustawiam ciało statycznie i ustawiam przewijanie na wartość, którą zapisałem wcześniej.

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

Po wielu dniach prób znalazłem to rozwiązanie, które działa dla mnie:

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

0

Wartość słowa kluczowego CSS, która resetuje wartość właściwości do wartości domyślnej określonej przez przeglądarkę w arkuszu stylów UA, tak jakby strona internetowa nie zawierała żadnego CSS. Na przykład display:revertw <div>wyniku display:block.

overflow: revert;

Myślę, że to zadziała poprawnie


-3

Po prostu zmień wysokość ciała na <300 pikseli (wysokość mobilnego widocznego obszaru na obszarze lądowym wynosi od 300 do 500 pikseli)

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

Niezbyt eleganckie rozwiązanie i spowoduje problemy na urządzeniach z systemem iOS, które są większe niż określone piksele, które ostatecznie wybierzesz. Należy zastosować inne rozwiązanie.
Badrush,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.