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

Question 1

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.

Question 2

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

Question 3

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

Question 4

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/

Question 5

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

Question 6

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.

Question 7

Działa w przeglądarce Safari.

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

Question 8

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 :)

Question 9

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!

Question 10

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

Question 11

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.

Question 12

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.

Question 13

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

Question 14

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

Question 15

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

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

Question 16

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

Question 17

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

Answer 1

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.

iphone css ipad safari overflow Francesco
źródło

2

Desperacko szukam odpowiedzi na to pytanie.

mwilcox

Answer 2

2

Desperacko szukam odpowiedzi na to pytanie.

mwilcox

Answer 3

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

Alex Haas
źródło

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

Answer 4

13

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

Kevin Borders

Answer 5

5

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

wutang

Answer 6

3

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

Charles John Thompson III,

Answer 7

1

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

Brett Gregson

Answer 8

2

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

Edo

Answer 9

89

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

laFunk
źródło

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

Answer 10

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

Answer 11

49

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

LeastOne

Answer 12

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

Answer 13

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

Kugel

Answer 14

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

Answer 15

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/

Davey
źródło

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

Answer 16

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

Answer 17

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

Answer 18

To naprawdę działało na mnie!

D.Steinel

Answer 19

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

Answer 20

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.

Answer 21

To było dla mnie rozwiązanie.

Roel Magdaleno

Answer 22

1

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

Jason

Answer 23

4

Działa w przeglądarce Safari.

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

Sridhar
źródło

Answer 24

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 :)

Answer 25

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!

Answer 26

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

Answer 27

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.

Lee McAlilly
źródło

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

Answer 28

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

Answer 29

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.

Answer 30

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

Answer 31

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

Answer 32

0

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

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

Eduardo Leite
źródło

Answer 33

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

Answer 34

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

kristian lepi
źródło

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,

Answer 35

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,

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

Odpowiedzi: