Overflow-x: hidden, içeriğin mobil tarayıcılarda taşmasını engellemez

142

Burada bir web sitem var .

Bir masaüstü tarayıcıda bakıldığında siyah menü çubuğu düzgün beri, sadece pencerenin kenarına kadar uzanır bodyvardır overflow-x:hidden.

Android veya iOS gibi herhangi bir mobil tarayıcıda, siyah menü çubuğu tam genişliğini görüntüler ve bu da sayfanın sağına boşluk getirir. Anlayabildiğim kadarıyla, bu boşluk htmlveya bodyetiketlerinin bir parçası bile değil .

Görünüm penceresini belirli bir genişliğe ayarlasam bile <head>:

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

Site 1100 piksele genişliyor, ancak yine de 1100'ün ötesinde boşluk var.

Neyi kaçırıyorum? Görünüm penceresini 1100 olarak nasıl saklayabilirim ve taşmayı nasıl kesebilirim?

— Indigenuity
kaynak

1

Bu özellikle iOS9'da bir sorun

— Chuck Le Butt

270

İçeride bir site sarıcı div oluşturma <body>ve uygulama overflow-x:hiddeniçin sargının yerine <body>veya <html>sabit sayısında.

<meta name="viewport">Etiketi ayrıştıran tarayıcıların ve etiketlerindeki overflowözellikleri görmezden geldiği anlaşılıyor .htmlbody

Not: position: relativeSarıcı div öğesine de eklemeniz gerekebilir .

— Indigenuity
kaynak

44

Ben ayarına ilave olarak bulundu overflowüzere hidden, ben ayarlamak zorunda positioniçin fixed...

— Victor S

16

Sabit konuma konum eklemek beni kaydırmayı engelliyor!

— teorize

5

Denedim, tüm kodumu bir div içine koydum ve taşma-x verdim: gizli ama çalışmıyor, <meta name = "viewport" content = "width = device-width, initial-scale = 1"> ama hiçbir şey değişmedi: / herhangi bir fikir?

4

@leepowers overflow-x: hidden, bu meta etiketi ekledikten sonra bile hala benim için çalışmıyor. Çalıştığı web sitenizin bağlantısını paylaşır mısınız?

— jupiteror

3

Hey çete, bunun da position:relativeişe yaradığını bulduğumda .

— Thomas Valadez

80

Deneyin

html, body {
  overflow-x:hidden 
}

sadece yerine

body {
  overflow-x:hidden 
}

— subarachnid
kaynak

7

Teşekkürler, ancak overflowherhangi bir şeyin htmlve / veya bodyherhangi bir kombinasyonun uygulanması sorunu çözmedi.

— Yerellik

Senin için işe yaramadığı için üzgünüm. Yanıt vermeden önce sitenizi kullanarak ve önerimi css'nize uygulayarak hızlı bir test yaptım. En azından android telefonumdaki standart ve yunus tarayıcı sorununu çözdü.

— subarachnid

3

Benim için çalıştı. eduardd.eu/projects/ezo (480 ve 992 piksel altbilgi, taşan kadın ve havlu görüntüsü ile ilgili bir sorun yaşadı)

— Eduard

2

Herkes {} ve html {} gövdesini ayrı ayrı belirtirken bunun neden işe yaradığını biliyor mu?

— hamncheez

1

Eklemek height:100%;gerekirse, aksi takdirde dikey kaydırma, görüntüleri yükleyen sayfalarda düzgün çalışmaz (bu da sayfanın yüksekliği büyür).

— Arno van Oordt

69

VictorS'un kabul edilen cevap hakkındaki yorumu kendi cevabı olmayı hak ediyor çünkü gerçekten işe yarayan çok zarif bir çözüm. Ve yararlılığına biraz ekleyeceğim.

Victor ekleme position:fixedçalışmaları not eder .

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

Ve gerçekten de öyle. Bununla birlikte, esasen yukarı kaydırmanın hafif bir yan etkisi vardır. position:absolutebunu çözer, ancak mobil cihazda kaydırma özelliğini yeniden sunar.

Görünümünüzü biliyorsanız (görünüm penceresi eklemek için eklentim) için<body> sadece bir css geçiş ekleyebilirsiniz 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; 
}

Ayrıca, modülleri gösterirken / gizlerken alttaki sayfanın sola / sağa sıçramasını önlemek için de ekliyorum.

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

— başsız çivi
kaynak

2

Mobil parçanın zirveye çıkmamasını sağlamak için yine de var mı?

— WraithKenny

1

Benim için işe yarayan, taşmasıyla gizlenmesi gereken öğeyi konumdan mutlak konuma döndürmekti: sabit. Neyse.

— Chuck Le Butt

1

@WraithKenny - Sayfanın bir mobil cihazda en üste atlanmasını önlemek istiyorsanız, aşağıdaki hack'ish / çirkin yaklaşımını kullanabilirsiniz. Kalıcı işlevinizin içinde, bir şey yapmadan önce geçerli kaydırma ofsetini aldığınızdan emin olun, kalıcı stili birlikte uygulayın ve ayrıca vücudunuzun üst kenar boşluğunu geçerli uzaklığın eksi değerine eşit olarak ayarlayın. Sunulan modu kaldırdığınızda, kenar boşluğunu tekrar 0'a getirin ve sayfayı orijinal kaymaya geri kaydırın.

— Emil Borconi

2

Bu çözüm yalnızca modunuzun içeriğinin ekrana sığması durumunda çalışır, yani modun kendisini kaydırmanız gerekmez.

— Tobias

Sayfamda başka sabit ve mutlak konumlandırılmış öğeler de var. Vücudun position:fixed or absolutepozisyonlarını da bozması. Uygun değil / benim durumumda çalışma :(

— sohaiby

31

Safari'deki yatay kaydırmayı çözmek için en basit çözüm budur.

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

— Waltur Buerk
kaynak

1

İşe yarıyor gibi görünüyor. Ama bunun neden işe yaradığına dair bir açıklamanız var mı?

— LarS

Hayır, sonunda işe yaramadı. Matematiği bitirdim ve div'ın izin verilenden daha geniş olmadığından emin oldum, css calc () göreceli genişliklerin (vw veya%) ve mutlak genişliklerin (px) karışımına izin verdiği için burada bana çok yardımcı oldu.

— LarS

Tabii bu bir çözüm. Hala bir yerlerde taşan bir şey var, şimdi kesildi. Bir css kuralı eklemeyi deneyin: * {anahat: 1 piksel sabit kırmızı; } Taşan öğeyi hala bulamıyorsanız, büyük olasılıkla bir yerlerde bir kenar boşluğu neden olur. * {Margin: 0! 'I eklemeyi deneyin. ÖNEMLİ; } ve taşmanın kaybolup kaybolmadığına bakın.

— Waltur Buerk

Benim için çalışıyor. Gizli elemanın gövdenin genişliğini değiştirmesi ilginçtir. Ancak, benim için, sadece mobil tarayıcılar için değil, TÜM Safari tarayıcıları için durum böyle. Sadece bir Bootstrap 4 table-responsiveBug düzeltmek zorunda kaldı . Çözüm buydu.

— CunningFatalist

2

Bunun 2019'da hala bir sorun olduğuna inanamıyorum. Ancak yukarıdaki çözüm tamamen işe yaradı. Teşekkürler.

— staxim

28

@Idigenuity belirttiği gibi, bunun nedeni <meta name="viewport">etiketi ayrıştıran tarayıcılar olabilir .

Bu sorunu kaynağında çözmek için aşağıdakileri deneyin:

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

Testlerimde bu, taşan içeriği görüntülemek için kullanıcının uzaklaştırma yapmasını engeller ve bunun sonucunda da kaydırma / kaydırmayı önler.

— Tempurturtul
kaynak

initial-scale=1Mevcut bir görünüm alanı meta etiketine eklemek gerçekten sorunu çözer. Teşekkürler!

— JamesWilson

6

Benim için minimum-scale=1bu düzeltildi

— jpenna

Diğer her şeyi denedikten sonra benim için gerçekten işe yaradı. Çok teşekkürler !

— Harsh Limaye

16

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

iOS9'da çalışır

— Ollio
kaynak

3

Çalışıyor, ancak pozisyon koymak: vücudunuza sabitlemek sizi

— yukarı

1

Tuhaf ama sabit pozisyon olmadan da benim için çalıştı. Buradaki tüm çözümlerden sadece bir tanesi!

— Garavani

Krom ve boostrap + açısalJ kullanarak benim için çalışan sadece bir tane

— kiwicomb123

6

Görünüm penceresine dokunmayın: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Sağ tarafa sürekli bir siyah çubuğun etkisini elde etmek istediğinizi varsayarsak: % 100'ü#menubar geçmemelidir , kenar yarıçapını sağ tarafın karesi olacak şekilde ayarlayın ve dolguyu biraz daha sağa uzanacak şekilde ayarlayın . Aşağıdakileri sizin için değiştirin :#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*/

Ayarlama paddingders yaprakların 10px çubuğunun kenarına sol menü için, kalan koyabilirsiniz 40px her birine li, 20px her iki tarafta sağ ve sol:

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

Tarayıcıyı daha küçük boyutta yeniden boyutlandırdığınızda, hala beyaz arka planı görürsünüz: div'iniz yerine arka plan dokunuzu yerleştirin body. Alternatif olarak, ortam sorgularını kullanarak gezinme menüsü genişliğini% 100'den daha düşük bir değere ayarlayın. Uygun bir düzen oluşturmak için kodunuzda yapılacak bir çok ayar var, ne yapmak istediğinizden emin değilim, ancak yukarıdaki kod bir şekilde taşan çubuğunuzu düzeltir.

— Anne
kaynak

kullanıyorsanız box-sizing: border-box;,% 100 genişlikli bir div'e dolgu ekleyebilirsiniz.

— Charles John Thompson III

6

Gövdenin içinde bir site sarıcısı div oluşturmak ve gövdenin veya html'nin sarıcı INSTEAD'e gizlenen taşma-> x: uygulanması sorunu düzeltti.

position: relativeSargıya ekledikten sonra bu benim için çalıştı .

— Isaac F
kaynak

Bu benim için çalıştı. Yan etki, bir yerine iki kaydırma çubuğum olmasıydı. Çözüm bunun overflow: hiddenyerine yapmaktı overflow-x: hidden. OSX ve Win üzerinde mobil Safari, Chrome, IE11 üzerinde çalışır.

— pop

4

İçeriğinizin <div>tamamına bir sarmalayıcı eklemek gerçekten işe yarayacaktır. Semantik olarak "icky", ben hemen bodyetiketin içine bir overflowWrap sınıfı ile bir div ekledim ve sonra ayarlamak benim CSS böyle ayarlayın:

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

Şimdi aşırıya kaçabilir, ama bir cazibe gibi çalışır!

— MBurnette
kaynak

4

Android cihazlarda da aynı sorunla karşılaştım ancak iOS cihazlarla karşılaşmadım. Kesin olarak konumlandırılmış öğelerin dış bölmesinde göreceli olarak konum belirleyerek çözmeyi yönetir (taşma ile: dış bölme için gizli)

— Kwok Pan Fung
kaynak

4

Daha önce tek bir çözüm işe yaramadı, bunları karıştırmak zorunda kaldım ve sorunu eski cihazlarda da (iphone 3) çözdüm.

İlk olarak, html içeriğini bir dış div içine sarmak zorunda kaldım:

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

Sonra taşma-x çalışmadığı için sarıcıya gizli taşma uygulamak zorunda kaldı:

  #wrapper {
    overflow: hidden;
  }

ve bu sorunu çözdü.

— spaghetticode
kaynak

Bunun @ Indigenuity'nin cevabından farkı nedir?

— Ian Kemp

3

@ian Kemp taşması: gizli! = taşma-x: gizli

— spagetticode

3

Taşma-x: gizli kullanarak sorunu çözdüm; aşağıdaki gibi

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

yapısı aşağıdaki gibidir

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
kaynak

3

Subarachnid'in, hem beden hem de html için gizli taşma-x'in çalıştığı gibi İşte örnek

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

bağlantı

— Skylin R
kaynak

1

Birkaç saattir bunun üzerinde çalışıyorum, bu ve diğer sayfalardan çeşitli kombinasyonları deniyorum. Sonunda benim için işe yarayan şey, kabul edilen cevapta önerildiği gibi bir site sarmalayıcı div yapmak, ancak her iki taşmayı da yalnızca x taşması yerine gizli olarak ayarlamaktı. Taşma-y'yi kaydırmada bırakırsam, yalnızca birkaç piksel dikey olarak kayan ve sonra duran bir sayfa bulurum.

#all-wrapper {
  overflow: hidden;
}

Sadece bu, vücut veya html elemanlarına herhangi bir şey ayarlamadan yeterliydi.

— highfellow
kaynak

1

Bu konudaki yanıtlardan pek çok yol denedim, çoğunlukla işe yarıyor, ancak taşma-x kullanıyorsam body,htmlkullanıcılar mobilde sayfayı aşağı kaydırdığında sayfayı yavaşlatabilir / dondurabilir.

position: fixedvücudun içinde sarıcı / div kullanmak da iyidir, ama bir menü var ve Javascript kullanmak bazı bölüme animasyonlu kaydırma tıklayın, Çalışmıyor.

Bu yüzden, touch-action: pan-y pinch-zoomvücudun içindeki sarıcı / div üzerinde kullanmaya karar verdim . Sorun çözüldü.

— Jirayu L
kaynak

0

Bootstrap modum (bu form içeren) için bu sorunu düzeltmenin tek yolu CSS'ime aşağıdaki kodu eklemekti:

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

— Tobias
kaynak