Overflow-x: hidden nie zapobiega przepełnieniu zawartości w przeglądarkach mobilnych

142

Mam tutaj stronę internetową .

W przeglądarce na komputerze czarny pasek menu prawidłowo rozciąga się tylko do krawędzi okna, ponieważ plik bodyma overflow-x:hidden.

W dowolnej przeglądarce mobilnej, czy to Android, czy iOS, czarny pasek menu wyświetla pełną szerokość, co powoduje pojawienie się spacji po prawej stronie strony. O ile wiem, ta biała spacja nie jest nawet częścią tagów htmllub body.

Nawet jeśli ustawię rzutnię na określoną szerokość w <head>:

<meta name="viewport" content="width=1100, initial-scale=1">

Witryna rozwija się do 1100px, ale nadal ma białe spacje poza 1100.

czego mi brakuje? Jak ustawić rzutnię na 1100 i odciąć przepełnienie?

— Indywidualność
źródło

1

Jest to szczególnie problem w iOS9

— Chuck Le Butt

270

Tworzenie witryny div otoki wewnątrz <body>i stosując overflow-x:hiddensię do owijki zamiast z <body>lub <html>stałej emisji.

Wygląda na to, że przeglądarki analizujące <meta name="viewport">tag po prostu ignorują overflowatrybuty tagów htmli body.

Uwaga: może być również konieczne dodanie position: relativedo opakowującego elementu div.

— Indywidualność
źródło

44

Okazało się, że oprócz ustawienie overflowsię hidden, musiałem ustawić positionsię fixed...

— Victor S

16

Dodanie pozycji do ustalonych zatrzymuje mnie przed przewijaniem!

— teoretyzuj

5

Próbowałem, umieściłem cały kod wewnątrz div i nadałem mu overflow-x: ukryty, ale nie działa, dodaję <meta name = "viewport" content = "width = device-width, initial-scale = 1"> też ale nic się nie zmieniło: / jakieś pomysły?

4

@leepowers overflow-x: hiddennadal nie działa, nawet po dodaniu tego metatagu. Czy mógłbyś udostępnić link do swojej witryny internetowej, na której działa?

— jupiteror

3

Hej gang, kiedy odkryłem, że to też position:relativedziała.

— Thomas Valadez,

80

próbować

html, body {
  overflow-x:hidden 
}

zamiast po prostu

body {
  overflow-x:hidden 
}

— podpajęczynówkowy
źródło

7

Dzięki, ale zastosowanie overflowczegokolwiek do htmli / lub bodyw dowolnej kombinacji nie rozwiązało problemu.

— Indigenuity

Przepraszam, że ci się nie udało. Zanim odpowiedziałem, wykonałem szybki test z wykorzystaniem Twojej witryny i zastosowałem moją sugestię do Twojego css. Naprawiono problem przynajmniej ze standardową i delfinową przeglądarką na moim telefonie z Androidem.

— podpajęczynówkowy

3

Pracował dla mnie. eduardd.eu/projects/ezo ( stopka między 480 a 992 pikseli miała problem z przepełnionym obrazem kobiety i ręcznikami)

— Eduard

2

Czy ktoś wie, dlaczego to działa, skoro osobne określenie body {} i html {} nie działa?

— hamncheez

1

Konieczne jest również dodanie height:100%;, w przeciwnym razie przewijanie w pionie nie działałoby poprawnie na stronach z ładowanymi obrazami (co powoduje wzrost wysokości strony).

— Arno van Oordt

69

Komentarz VictorSa na temat zaakceptowanej odpowiedzi zasługuje na to, by być jego własną odpowiedzią, ponieważ jest to bardzo eleganckie rozwiązanie, które rzeczywiście działa. I dodam odrobinę do jego użyteczności.

Victor zauważa, że dodaje position:fixedprace.

body.modal-open {
    overflow: hidden;
    position: fixed;
}

I rzeczywiście tak jest. Jednak ma również niewielki efekt boczny polegający na przewijaniu do góry. position:absoluterozwiązuje ten problem, ale ponownie wprowadza możliwość przewijania na telefonie komórkowym.

Jeśli znasz swój widok ( moja wtyczka do dodawania widoku 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; 
}

Dodam to również, aby zapobiec przeskakiwaniu podstawowej strony w lewo / w prawo podczas pokazywania / ukrywania modali.

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

— Ćwiek
źródło

2

Czy w ogóle jest możliwość, aby część mobilna nie wskakiwała na górę?

— WraithKenny

1

U mnie zadziałało obrócenie elementu, który miał być ukryty przez przepełnienie z pozycji: absolutnej do pozycji: ustalona. Na szczęście.

— Chuck Le Butt

1

@WraithKenny - jeśli chcesz, aby strona zapobiegała przeskakiwaniu na górę na urządzeniu mobilnym, możesz zastosować następujące hack'ish / brzydkie podejście. Wewnątrz swojej funkcji modalnej upewnij się, że otrzymałeś aktualne przesunięcie przewijania, zanim cokolwiek zrobisz, niż zastosuj styl modalny razem, a także ustaw górny margines ciała równy minusowi bieżącego przesunięcia. Upewnij się, że po usunięciu modalu ustaw margines z powrotem na 0 i przewiń stronę z powrotem do oryginalnego przesunięcia.

— Emil Borconi,

2

To rozwiązanie działa tylko w przypadku, gdy zawartość twojego modalu mieści się na ekranie, tj. Nie musisz przewijać samego modalu.

— Tobias

Na mojej stronie są również inne elementy o stałej i bezwzględnej pozycji. Sprawia, że ciało position:fixed or absolutezaburza również ich pozycję. Nie nadaje się / działa w moim przypadku :(

— sohaiby

31

To najprostsze rozwiązanie do rozwiązywania problemów z przewijaniem poziomym w Safari.

html, body {
  position:relative;
  overflow-x:hidden;
}

— Waltur Buerk
źródło

1

Wydaje się, że działa. Ale czy masz wyjaśnienie, dlaczego to działa?

— LarS,

Nie, to w końcu nie zadziałało. Skończyło się na tym, że wykonałem obliczenia i upewniłem się, że elementy div nie są szersze niż dozwolone, css calc () bardzo mi tutaj pomogło, ponieważ pozwala na połączenie względnych szerokości (vw lub%) i bezwzględnych (px).

— LarS

Oczywiście jest to coś w rodzaju obejścia. Nadal gdzieś coś przepełnia, po prostu jest teraz odcięte. Spróbuj dodać regułę CSS: * {konspekt: 1px ciągły czerwony; } Jeśli nadal nie możesz znaleźć przepełnionego elementu, prawdopodobnie jest to spowodowane gdzieś marginesem. Spróbuj dodać * {margin: 0! WAŻNE; } i zobacz, czy przepełnienie zniknie.

— Waltur Buerk

Pracuje dla mnie. Ciekawe, że ukryty element zmienia szerokość ciała. U mnie dotyczy to jednak WSZYSTKICH przeglądarek Safari, nie tylko mobilnych. Musiałem tylko naprawić table-responsivebłąd Bootstrap 4 . To było rozwiązanie.

— CunningFatalist

2

Nie mogę uwierzyć, że to nadal jest problem w 2019 roku. Ale powyższe rozwiązanie całkowicie zadziałało. Dzięki.

— staxim

28

Jak stwierdza @Indigenuity, wydaje się, że jest to spowodowane analizowaniem <meta name="viewport">tagu przez przeglądarki .

Aby rozwiązać ten problem u źródła, wykonaj następujące czynności:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.

W moich testach uniemożliwia to użytkownikowi zmniejszenie powiększenia w celu wyświetlenia przepełnionej treści, a w rezultacie zapobiega również przesuwaniu / przewijaniu do niej.

— Tempurturtul
źródło

Dodanie initial-scale=1do istniejącego metatagu rzutni rzeczywiście rozwiązuje problem. Dzięki!

— JamesWilson

6

Dla mnie to minimum-scale=1naprawiło

— jpenna

To właśnie zadziałało dla mnie po wypróbowaniu wszystkiego innego. Wielkie dzięki !

— Harsh Limaye

16

body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

działa na iOS9

— ollio
źródło

3

To działa, ale umieszczenie pozycji: przymocowana do ciała powoduje, że przewijasz do góry

— ThaoD5

1

Dziwne, ale zadziałało dla mnie również bez stałej pozycji. Tylko jedno ze wszystkich dostępnych tutaj rozwiązań!

— Garavani,

Tylko jeden, który zadziałał dla mnie, używając chromu i boostrapa + kątowegoJS

— kiwicomb123

6

Pozostaw rzutnię nietkniętą: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Zakładając, że chciałbyś uzyskać efekt ciągłego czarnego paska po prawej stronie: #menubarnie powinien przekraczać 100% , dostosuj promień obramowania tak, aby prawa strona była kwadratowa i wyreguluj wyściółkę tak, aby rozciągała się trochę bardziej w prawo . Zmień następujące elementy 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*/

Regulacja paddingdo 10px liści oczywiście menu po lewej krawędzi paska, można umieścić pozostałą 40px na każdym li, 20px na każdej stronie lewej i prawej:

.menuitem {
display: block;
padding: 0px 20px;
}

Gdy zmniejszysz rozmiar przeglądarki, zobaczysz nadal białe tło: zamiast tego umieść teksturę tła z elementu div na body. Możesz też zmienić szerokość menu nawigacyjnego ze 100% na niższą wartość za pomocą zapytań o media. Jest wiele zmian, które należy wprowadzić w swoim kodzie, aby stworzyć odpowiedni układ, nie jestem pewien, co zamierzasz zrobić, ale powyższy kod w jakiś sposób naprawi przepełniony pasek.

— Anne
źródło

jeśli używasz box-sizing: border-box;, możesz dodać dopełnienie do elementu div o szerokości 100%.

— Charles John Thompson III

6

Utworzenie opakowującego elementu div witryny wewnątrz treści i zastosowanie przepełnienia-> x: ukryty do opakowania ZAMIAST treści lub html rozwiązało problem.

To zadziałało dla mnie po dodaniu również position: relativedo opakowania.

— Isaac F.
źródło

To zadziałało dla mnie. Efektem ubocznym było to, że zamiast jednego mam dwa paski przewijania. Rozwiązaniem było zrobić to overflow: hiddenzamiast overflow-x: hidden. Działa na mobilnych przeglądarkach Safari, Chrome, IE11 na OSX i Win.

— pop

4

Dodanie otoki <div>wokół całej zawartości rzeczywiście zadziała. Chociaż semantycznie „icky”, dodałem div z klasą overflowWrap bezpośrednio wewnątrz bodytagu, a następnie ustawiłem mój CSS w ten sposób:

html, body, .overflowWrap {
overflow-x: hidden;
}

Teraz może być przesadą, ale działa jak urok!

— MBurnette
źródło

4

Napotkałem ten sam problem z urządzeniami z Androidem, ale nie z urządzeniami iOS. Zarządzane do rozwiązania przez określenie pozycji: względna w zewnętrznym div elementów pozycjonowanych absolutnie (z przepełnieniem: ukryty dla zewnętrznego elementu div)

— Kwok Pan Fung
źródło

4

Żadne poprzednie rozwiązanie nie działało dla mnie, musiałem je miksować i naprawiono problem również na starszych urządzeniach (iPhone 3).

Najpierw musiałem zawinąć zawartość html do zewnętrznego div:

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

Potem musiałem zastosować przepełnienie ukryte w opakowaniu, bo overflow-x nie działał:

  #wrapper {
    overflow: hidden;
  }

i to rozwiązało problem.

— spaghetticode
źródło

Czym to się różni od odpowiedzi @ Indigenuity?

— Ian Kemp

3

@ian Kemp overflow: hidden! = overflow-x: hidden

— spaghetticode

3

Rozwiązałem problem za pomocą overflow-x: hidden; następująco

@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

— vikas etagi
źródło

3

Jak powiedział subarachnid, overflow-x ukryty zarówno dla body, jak i html działał. Oto roboczy przykład

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

Połączyć

— Skylin R
źródło

1

Pracowałem nad tym od kilku godzin, próbując różnych kombinacji rzeczy z tej i innych stron. Ostatecznie pomogło mi utworzenie opakowującego elementu div witryny, jak zasugerowano w zaakceptowanej odpowiedzi, ale ustawienie obu przepełnień na ukryte, a nie tylko przepełnienie x. Jeśli zostawię overflow-y przy przewijaniu, otrzymam stronę, która przewija się w pionie tylko o kilka pikseli, a następnie zatrzymuje się.

#all-wrapper {
  overflow: hidden;
}

Po prostu to wystarczyło, bez ustawiania czegokolwiek na elementach body ani html.

— Highfellow
źródło

1

Wypróbowałem wiele sposobów odpowiedzi w tym temacie, głównie działa, ale dostałem efekt uboczny, na przykład użycie overflow-x, body,htmlktóre może spowolnić / zawiesić stronę, gdy użytkownicy przewijają w dół na telefonie komórkowym.

użycie position: fixedna wrapper / div wewnątrz ciała jest również dobre, ale kiedy mam menu i używam animacji JavaScript kliknij animowane przewijanie do jakiejś sekcji, to nie działa.

Więc zdecydowałem się użyć touch-action: pan-y pinch-zoomna wrapper / div wewnątrz ciała. Problem rozwiązany.

— Jirayu L.
źródło

0

Jedynym sposobem rozwiązania tego problemu w przypadku mojego modalnego ładowania początkowego (zawierającego formularz) było dodanie następującego kodu do mojego CSS:

.modal {
    -webkit-overflow-scrolling: auto!important;
}

— Tobias
źródło