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.
Odpowiedzi:
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%;
}
position: relative.
body {
position:relative; // that's it
overflow:hidden;
}
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/
position: relative), jednak pozycja przewijania jest tracona po przywróceniu domyślnego stylu (np. Zamknięcie menu).
// 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' ) );
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.
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!
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
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.
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.
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]-->
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);
}
Po wielu dniach prób znalazłem to rozwiązanie, które działa dla mnie:
touch-action: none;
-ms-touch-action: none;
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
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%;
}