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?

css overflow viewport mobile-browser 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

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

Odpowiedzi: