Overflow-x: hidden nie zapobiega przepełnieniu zawartości w przeglądarkach mobilnych
Mam Stronę tutaj .
Wyświetlany w przeglądarce komputerowej, czarny pasek menu prawidłowo rozciąga się tylko do krawędzi okna, ponieważ body mA overflow-x:hidden.
W każdej przeglądarce mobilnej, Android lub iOS, czarny pasek menu wyświetla pełną szerokość, co powoduje białe znaki po prawej stronie strony. Z tego co wiem, ta biała spacja nie jest nawet częścią znaczników html ani body.
Nawet jeśli ustawię viewport na określoną szerokość w <head>:
<meta name="viewport" content="width=1100, initial-scale=1">
Strona rozszerza się do 1100px, ale nadal ma białą spację poza 1100.
Co mi umyka? Jak utrzymać viewport na poziomie 1100 i odciąć przepełnienie?16 answers
Tworzenie div wrappera strony Wewnątrz <body> i zastosowanie overflow-x:hidden do wrappera zamiast <body> lub <html> Naprawiono problem.
Wygląda na to, że przeglądarki analizujące znacznik <meta name="viewport"> po prostu ignorują atrybuty overflow na znacznikach html i body.
Uwaga: Może być również konieczne dodanie position: relative do wrappera div.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-18 00:01:27
Try
html, body {
overflow-x:hidden
}
Zamiast tylko
body {
overflow-x:hidden
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-11 02:41:51
Komentarz zwycięzcy do zaakceptowanej odpowiedzi zasługuje na własną odpowiedź, ponieważ jest to bardzo eleganckie rozwiązanie, które rzeczywiście działa. I dodam trochę do jego przydatności.
Victor notes dodawanie position:fixed prac.
body.modal-open {
overflow: hidden;
position: fixed;
}
position:absolute rozwiązuje ten problem, ale ponownie wprowadza możliwość przewijania w telefonie komórkowym.
If you know your viewport (my plugin for dodawanie viewportu do <body>) możesz po prostu dodać przełącznik css dla position.
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
Dodaję również to, aby zapobiec przeskakiwaniu strony w lewo/prawo podczas pokazywania / ukrywania modali.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:20
Jest to najprostsze rozwiązanie do rozwiązania horisontalnego przewijania w Safari.
html, body {
position:relative;
overflow-x:hidden;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-04 14:49:11
Jak stwierdza @Indigenuity, wydaje się, że jest to spowodowane przez przeglądarki parsujące znacznik <meta name="viewport">.
Aby rozwiązać ten problem u źródła, spróbuj:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.
W moich testach zapobiega to powiększeniu, aby wyświetlić przepełnioną zawartość, a w rezultacie zapobiega również przesuwaniu / przewijaniu do niej.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-18 11:52:14
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
Działa na iOS9
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-21 15:02:09
Utrzymuj widok nietknięty: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Zakładając, że chcesz osiągnąć efekt ciągłego czarnego paska po prawej stronie: #menubar nie powinieneś przekraczać 100%, dopasuj promień krawędzi tak, aby prawa strona była do kwadratu i dopasuj wyściółkę tak, aby rozciągała się trochę bardziej w prawo. Zmodyfikuj na #menubar:
border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/
Dostosowanie padding do 10px oczywiście pozostawia menu po lewej stronie do krawędzi paska, można umieścić pozostałe 40px do każdego z li, 20px po każdej stronie lewej i prawej:
.menuitem {
display: block;
padding: 0px 20px;
}
Gdy zmienisz rozmiar przeglądarki na mniejszy, nadal znajdziesz białe tło: umieść teksturę tła z div na body. Możesz też zmienić szerokość menu nawigacyjnego od 100% do niższej wartości, korzystając z zapytań o media. Istnieje wiele poprawek do kodu, aby utworzyć właściwy układ, nie jestem pewien, co zamierzasz zrobić, ale powyższy kod jakoś naprawi Twój przepełniony bar.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-11 04:43:50
Tworzenie div wrappera witryny wewnątrz ciała i zastosowanie overflow - > x:hidden do wrappera zamiast body lub html naprawiło problem.
To zadziałało dla mnie po dodaniu position: relative do opakowania.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-29 11:46:18
Dodanie wrappera <div> wokół całej zawartości rzeczywiście zadziała. Podczas gdy semantycznie "icky", dodałem div z klasą overflowWrap tuż wewnątrz znacznika body, a następnie set set my CSS tak:
html, body, .overflowWrap {
overflow-x: hidden;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-23 03:46:53
Napotkałem ten sam problem na urządzeniach z Androidem, ale nie na urządzeniach z iOS. Możliwe jest również ustawienie opcji position: relative w zewnętrznym div elementów bezwzględnie pozycjonowanych (z overflow:hidden for outer div)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-23 16:26:36
Żadne poprzednie pojedyncze rozwiązanie nie działało dla mnie, musiałem je wymieszać i naprawiłem problem również na starszych urządzeniach (iphone 3).
Najpierw musiałem zawinąć zawartość html w zewnętrzny div:
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
Potem musiałem zastosować overflow hidden do wrappera, ponieważ overflow-x nie działało:
#wrapper {
overflow: hidden;
}
I to naprawiło problem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-16 09:17:16
Rozwiązałem problem używając overflow-x: hidden; w następujący sposób
@media screen and (max-width: 441px){
#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
overflow-x: hidden;
}
}
Struktura jest następująca
1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.
'end_screen is the wrapper of end_screen_1 and end_screen_2 div's
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-07 11:53:39
Jak powiedział subarachnid overflow-x hidden for both body and html worked Oto przykład pracy
**HTML**
<div class="contener">
<div class="menu">
das
</div>
<div class="hover">
<div class="img1">
First Strip
</div>
<div class="img2">
Second Strip
</div>
</div>
</div>
<div class="baner">
dsa
</div>
**CSS**
body, html{
overflow-x:hidden;
}
body{
margin:0;
}
.contener{
width:100vw;
}
.baner{
background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
width:100vw;
height:400px;
margin-left:0;
left:0;
}
.contener{
height:100px;
}
.menu{
display:flex;
background-color:teal;
height:100%;
justify-content:flex-end;
align:content:bottom;
}
.img1{
width:150px;
height:25px;
transform:rotate(45deg);
background-color:red;
position:absolute;
top:40px;
right:-50px;
line-height:25px;
padding:0 20px;
cursor:pointer;
color:white;
text-align:center;
transition:all 0.4s;
}
.img2{
width:190px;
text-align:center;
transform:rotate(45deg);
background-color:#333;
position:absolute;
height:25px;
line-height:25px;
top:55px;
right:-50px;
padding:0 20px;
cursor:pointer;
color:white;
transition:all 0.4s;
}
.hover{
overflow:hidden;
}
.hover:hover .img1{
background-color:#333;
transition:all 0.4s;
}
.hover:hover .img2{
background-color:blue;
transition:all 0.4s;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-26 18:59:01
Pracuję nad tym od kilku godzin, próbując różnych kombinacji rzeczy z tej i innych stron. Rzecz, która zadziałała dla mnie w końcu, to zrobić div wrapper strony, jak sugerowano w zaakceptowanej odpowiedzi, ale ustawić oba przepełnienia na Ukryte, a nie tylko przepełnienie X. Jeśli zostawię overflow-y przy przewijaniu, skończę ze stroną, która przewija się tylko pionowo o kilka pikseli, a następnie zatrzymuje się.
#all-wrapper {
overflow: hidden;
}
Po prostu to wystarczyło, bez ustawiania czegokolwiek na body lub html żywioły.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 10:00:57
Próbowałem wiele sposobów z odpowiedzi w tym temacie, głównie działa, ale dostałem jakiś efekt uboczny, jak Jeśli używam overflow-x na {[0] } to może spowolnić / zamrozić stronę, gdy użytkownicy przewijają w dół na telefonie komórkowym.
Użyj position: fixed na wrapper / div wewnątrz ciała jest również dobry, ale gdy mam menu i używać Javascript kliknij animowany przewiń do jakiejś sekcji, to nie działa.
touch-action: pan-y pinch-zoom na wrapper / div wewnątrz ciała. Problem rozwiązany.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-24 15:00:40
Jedynym sposobem na naprawienie tego problemu z modalem bootstrap (zawierającym formularz) było dodanie następującego kodu do mojego CSS:
.modal {
-webkit-overflow-scrolling: auto!important;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-12 06:28:26