ล้น: x: ซ่อนไม่ได้ป้องกันเนื้อหาจากการล้นในเบราว์เซอร์มือถือ

142

ฉันมีเว็บไซต์ที่นี่

ดูได้ในเบราว์เซอร์สก์ท็อปที่แถบเมนูสีดำถูกขยายครอบคลุมเฉพาะไปที่ขอบของหน้าต่างตั้งแต่มี bodyoverflow-x:hidden

ในเบราว์เซอร์มือถือไม่ว่าจะเป็น Android หรือ iOS แถบเมนูสีดำจะแสดงความกว้างเต็มรูปแบบซึ่งจะทำให้ช่องว่างทางด้านขวาของหน้าเว็บ เท่าที่ฉันสามารถบอกได้ช่องว่างนี้ไม่ได้เป็นส่วนหนึ่งของhtmlหรือbodyแท็ก

แม้ว่าฉันจะตั้งค่าวิวพอร์ตเป็นความกว้างเฉพาะใน<head>:

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

ไซต์ขยายเป็น 1100px แต่ยังคงมีช่องว่างเกิน 1100

ฉันพลาดอะไรไป ฉันจะเก็บวิวพอร์ตเป็น 1100 และตัดการโอเวอร์โฟลว์ได้อย่างไร

— Indigenuity
แหล่งที่มา

1

นี่เป็นปัญหาโดยเฉพาะอย่างยิ่งใน iOS9

— Chuck Le Butt

270

การสร้าง wrapper ของไซต์ภายใน<body>และนำไปใช้overflow-x:hiddenกับwrapperแทน<body>หรือ<html>แก้ไขปัญหา

ดูเหมือนว่าเบราว์เซอร์ที่วิเคราะห์<meta name="viewport">แท็กจะละเว้นoverflowคุณสมบัติในแท็กhtmlและbody

หมายเหตุ: คุณอาจต้องเพิ่มposition: relativeDiv wrapper

— Indigenuity
แหล่งที่มา

44

ผมพบว่านอกเหนือไปจากการตั้งค่าoverflowเพื่อhiddenผมต้องตั้งค่าpositionที่จะfixed...

— วิคเตอร์ S

16

การเพิ่มตำแหน่งในการแก้ไขทำให้ฉันไม่สามารถเลื่อนได้!

— ทฤษฎีใน

5

ฉันพยายามฉันใส่รหัสทั้งหมดของฉันไว้ใน div และให้ overflow-x: ซ่อน แต่ไม่ทำงานฉันเพิ่ม <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, initial-scale = 1"> ด้วย แต่ไม่มีอะไรเปลี่ยนแปลง: / ความคิดใด ๆ

4

@leepowers overflow-x: hiddenยังคงไม่ทำงานสำหรับฉันแม้ว่าฉันจะเพิ่มเมตาแท็กนี้แล้ว คุณช่วยแบ่งปันลิงค์ไปยังเว็บไซต์ของคุณที่มันทำงานอยู่ได้ไหม?

— ดาวพฤหัสบดี

3

เฮ้แก๊งเมื่อฉันพบว่าใช้position:relativeงานได้ดี

— Thomas Valadez

80

ลอง

html, body {
  overflow-x:hidden 
}

แทนที่จะเป็นเพียงแค่

body {
  overflow-x:hidden 
}

— subarachnid
แหล่งที่มา

7

ขอบคุณ แต่แอปพลิเคชันของoverflowสิ่งใดไปhtmlและ / หรือbodyชุดค่าผสมใด ๆ ไม่ได้แก้ปัญหา

— พื้นเมือง

ขออภัยที่มันไม่ได้ผลสำหรับคุณ ก่อนที่ฉันจะตอบฉันทำการทดสอบอย่างรวดเร็วโดยใช้ไซต์ของคุณและใช้คำแนะนำของฉันกับ css ของคุณ มันแก้ไขปัญหาสำหรับเบราว์เซอร์มาตรฐานและโลมาบนโทรศัพท์ Android ของฉันอย่างน้อย

— subarachnid

3

ทำงานให้ฉัน eduardd.eu/projects/ezo (ระหว่าง 480 และ 992px ส่วนท้ายมีปัญหากับภาพที่ล้นของหญิงสาวและผ้าเช็ดตัว)

— Eduard

2

มีใครรู้บ้างไหมว่าทำไมสิ่งนี้ถึงได้ผลเมื่อระบุเนื้อหา {} และ html {} แยกต่างหาก

— hamncheez

1

หากต้องการเพิ่มheight:100%;เช่นกันมิฉะนั้นการเลื่อนแนวตั้งจะไม่สามารถทำงานได้อย่างถูกต้องบนหน้าเว็บที่มีการโหลดรูปภาพ (ซึ่งทำให้หน้าเว็บมีความสูง)

— Arno van Oordt

69

ความเห็นของVictorSเกี่ยวกับคำตอบที่ได้รับนั้นควรเป็นคำตอบของตัวเองเพราะมันเป็นคำตอบที่สง่างามมาก และฉันจะเพิ่มตาดให้เป็นประโยชน์

Victor บันทึกการเพิ่มposition:fixedผลงาน

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

และแน่นอนมันทำ อย่างไรก็ตามก็มีผลกระทบด้านข้างเล็กน้อยจากการเลื่อนไปด้านบนเป็นหลัก position:absoluteแก้ไขสิ่งนี้ แต่แนะนำความสามารถในการเลื่อนบนมือถืออีกครั้ง

ถ้าคุณรู้ว่าวิวพอร์ต ( ปลั๊กอินของฉันสำหรับการเพิ่มวิวพอร์ตไป<body> ) คุณก็สามารถเพิ่มสลับ CSS 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; 
}

ฉันยังเพิ่มสิ่งนี้เพื่อป้องกันไม่ให้หน้าต้นแบบกระโดดไปทางซ้าย / ขวาเมื่อแสดง / ซ่อน modals

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

— แบรด
แหล่งที่มา

2

มีอยู่เพื่อให้ส่วนมือถือไม่ข้ามไปด้านบนหรือไม่

— WraithKenny

1

สิ่งที่ใช้ได้ผลสำหรับฉันคือการเปลี่ยนองค์ประกอบที่ควรถูกซ่อนไว้โดยล้นจากตำแหน่ง: แน่นอนเป็นตำแหน่ง: คงที่ ขอบคุณ

— Chuck Le Butt

1

@WraithKenny - หากคุณต้องการหน้าเพื่อป้องกันการกระโดดขึ้นไปด้านบนบนอุปกรณ์มือถือคุณสามารถใช้วิธีแฮ็ค / น่าเกลียดดังต่อไปนี้ ภายในฟังก์ชั่นโมดัลตรวจสอบให้แน่ใจว่าคุณได้รับการเลื่อนสโครลปัจจุบันก่อนทำอะไรมากกว่าใช้สไตล์โมดอลร่วมกันและตั้งขอบบนของร่างกายของคุณเท่ากับลบออฟเซ็ตปัจจุบัน ตรวจสอบให้แน่ใจเมื่อคุณลบคำกริยาคุณตั้งระยะขอบกลับเป็น 0 และเลื่อนหน้ากลับไปที่การชดเชยเดิม

— Emil Borconi

2

โซลูชันนี้ใช้งานได้เฉพาะในกรณีที่เนื้อหาของโมดอลของคุณพอดีกับหน้าจอกล่าวคือคุณไม่จำเป็นต้องเลื่อนคำกริยา

— โทเบียส

มีองค์ประกอบอื่น ๆ ที่แน่นอนและตำแหน่งแน่นอนในหน้าของฉันเช่นกัน ทำให้ร่างกายposition:fixed or absoluteรบกวนตำแหน่งของพวกเขาเช่นกัน ไม่เหมาะสม / ทำงานในกรณีของฉัน :(

— sohaiby

31

นี่เป็นทางออกที่ง่ายที่สุดในการแก้ปัญหาการเลื่อนในหน้าจอ Safari ใน Safari

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

— Waltur Buerk
แหล่งที่มา

1

ดูเหมือนว่าจะทำงาน แต่คุณมีคำอธิบายว่าทำไมสิ่งนี้ถึงได้ผล

— LarS

ไม่ในที่สุดมันก็ไม่ทำงาน ฉันลงเอยด้วยการทำคณิตศาสตร์และทำให้แน่ใจว่า div ไม่กว้างกว่าที่อนุญาต css calc () ช่วยฉันได้มากที่นี่เพราะมันช่วยให้การผสมผสานของความกว้างสัมพัทธ์ (vw หรือ%) และความกว้างสัมบูรณ์ (px)

— LarS

แน่นอนว่านี่เป็นวิธีแก้ปัญหา ยังมีบางสิ่งที่ไหลล้นอยู่ที่ไหนสักแห่งมันเพิ่งถูกตัดออกตอนนี้ ลองเพิ่มกฎ css: * {outline: 1px solid red; } หากคุณยังไม่พบองค์ประกอบที่มากเกินไปก็อาจเกิดจากระยะขอบบางส่วน ลองเพิ่ม * {margin: 0! สำคัญ; } และดูว่าโอเวอร์โฟลว์หายไปหรือไม่

— Waltur Buerk

ได้ผลสำหรับฉัน ที่น่าสนใจว่าองค์ประกอบที่ซ่อนอยู่เปลี่ยนความกว้างของร่างกาย สำหรับฉันแล้วนี่เป็นกรณีของเบราว์เซอร์ Safari ทั้งหมดไม่ใช่เฉพาะเบราว์เซอร์มือถือ เพิ่งต้องแก้ไข Bootstrap 4 table-responsiveBug นี่คือทางออก

— CunningFatalist

2

ฉันไม่อยากเชื่อเลยว่านี่จะยังคงเป็นปัญหาในปี 2562 แต่วิธีแก้ปัญหาข้างต้นใช้ได้ผล ขอบคุณ.

— staxim

28

ในฐานะที่เป็น @Indigenuity สถานะสิ่งนี้ดูเหมือนจะเกิดจากเบราว์เซอร์ที่แยกวิเคราะห์<meta name="viewport">แท็ก

เมื่อต้องการแก้ไขปัญหานี้ที่แหล่งที่มาลองต่อไปนี้:

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

ในการทดสอบของฉันสิ่งนี้จะช่วยป้องกันไม่ให้ผู้ใช้ซูมออกเพื่อดูเนื้อหาที่มีการล้นและเป็นผลให้ป้องกันการแพน / เลื่อนไปที่เนื้อหาเช่นกัน

— Tempurturtul
แหล่งที่มา

การเพิ่มinitial-scale=1ไปยังเมตาแท็กวิวพอร์ตที่มีอยู่ไม่สามารถแก้ไขปัญหาได้ ขอบคุณ!

— JamesWilson

6

สำหรับฉันมันเป็นสิ่งminimum-scale=1ที่แก้ไขได้

— jpenna

นี่คือสิ่งที่ใช้งานได้จริงสำหรับฉันหลังจากลองทุกอย่างอื่น ขอบคุณมาก !

— Harsh Limaye

16

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

ใช้งานได้กับ iOS9

— ollio
แหล่งที่มา

3

มันใช้งานได้ แต่การวางตำแหน่ง: จับจ้องไปที่ร่างกายของคุณจะทำให้คุณเลื่อนไปด้านบน

— ThaoD5

1

แปลก แต่มันก็ได้ผลสำหรับฉันที่ไม่มีตำแหน่งแน่นอนเช่นกัน หนึ่งเดียวจากโซลูชั่นทั้งหมดที่นี่!

— Garavani

มีเพียงอันเดียวที่ใช้งานได้สำหรับฉันโดยใช้ Chrom และ boostrap + angularJS

— kiwicomb123

6

ทำให้ไม่มีการแตะที่วิวพอร์ต: <meta name="viewport" content="width=device-width, initial-scale=1.0">

สมมติว่าคุณต้องการให้บรรลุผลของแถบสีดำอย่างต่อเนื่องไปทางด้านขวา: #menubarไม่ควรเกิน100% , ปรับรัศมีเส้นขอบเพื่อให้ด้านขวาเป็นรูปสี่เหลี่ยมและปรับระยะห่างเพื่อให้ขยายไปทางขวาอีกเล็กน้อย . แก้ไขสิ่งต่อไปนี้กับของคุณ#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*/

การปรับpaddingเพื่อ 10px ของใบหลักสูตรเมนูด้านซ้ายไปที่ขอบของบาร์ที่คุณสามารถนำส่วนที่เหลืออีก40 พิกเซลแต่ละli, 20pxในแต่ละด้านซ้ายและขวา:

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

เมื่อคุณปรับขนาดเบราว์เซอร์ที่มีขนาดเล็กคุณจะพบยังคงเป็นพื้นหลังสีขาว: วางพื้นผิวพื้นหลังของคุณแทนจาก div bodyของคุณเพื่อ หรืออีกวิธีหนึ่งคือปรับความกว้างเมนูการนำทางจาก 100% เป็นค่าต่ำกว่าโดยใช้คำสั่งสื่อ มีการปรับแต่งมากมายที่จะทำกับรหัสของคุณเพื่อสร้างเลย์เอาต์ที่เหมาะสมฉันไม่แน่ใจว่าคุณตั้งใจจะทำอะไร แต่โค้ดด้านบนจะแก้ไขแถบที่ล้นของคุณ

— แอนน์
แหล่งที่มา

ถ้าคุณใช้box-sizing: border-box;คุณสามารถเพิ่มช่องว่างใน div ความกว้าง 100%

— Charles John Thompson III

6

การสร้างเว็บไซต์ wrapper div ภายในร่างกายและใช้ overflow-> x: hidden เพื่อ wrapper INSTEAD ของ body หรือ html เพื่อแก้ไขปัญหา

มันใช้งานได้สำหรับฉันหลังจากเพิ่มposition: relativeไปยังเสื้อคลุม

— Isaac F
แหล่งที่มา

สิ่งนี้ใช้ได้สำหรับฉัน ผลข้างเคียงคือฉันมีแถบเลื่อนสองแถบแทนที่จะเป็นหนึ่งแถบ การแก้ปัญหาคือการทำให้มันแทนoverflow: hidden overflow-x: hiddenใช้งานได้กับมือถือ Safari, Chrome, IE11 บน OSX และ Win

— ป๊อป

4

การเพิ่มเสื้อคลุม<div>รอบเนื้อหาทั้งหมดของคุณจะได้ผลแน่นอน ในขณะที่ความหมาย "icky" ฉันเพิ่ม div ด้วยคลาสของ overflowWrap ที่ด้านในbodyแท็กจากนั้นตั้งค่า CSS ของฉันดังนี้:

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

ตอนนี้อาจ overkill แต่ทำงานเหมือนมีเสน่ห์!

— MBurnette
แหล่งที่มา

4

ฉันพบปัญหาเดียวกันกับอุปกรณ์ Android แต่ไม่ใช่อุปกรณ์ iOS จัดการเพื่อแก้ไขโดยระบุตำแหน่ง: สัมพันธ์ใน div ภายนอกขององค์ประกอบตำแหน่งที่แน่นอน (พร้อม overflow: ซ่อนไว้สำหรับ div ภายนอก)

— Kwok Pan Fung
แหล่งที่มา

4

ไม่มีวิธีแก้ปัญหาเดียวก่อนหน้านี้ที่ทำงานสำหรับฉันฉันต้องผสมพวกเขาและได้รับการแก้ไขปัญหาบนอุปกรณ์รุ่นเก่า (iphone 3)

ก่อนอื่นฉันต้องห่อเนื้อหา html ลงใน div ภายนอก:

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

จากนั้นฉันต้องใช้โอเวอร์โฟลว์ที่ซ่อนอยู่กับเสื้อคลุมเพราะ overflow-x ไม่ทำงาน:

  #wrapper {
    overflow: hidden;
  }

และสิ่งนี้แก้ไขปัญหาได้

— spaghetticode
แหล่งที่มา

สิ่งนี้แตกต่างกับคำตอบของ @ Indigenuity อย่างไร

— Ian Kemp

3

@ian Kemp ล้น: hidden! = overflow-x: hidden

— spaghetticode

3

ฉันแก้ไขปัญหาโดยใช้ overflow-x: hidden; ดังนี้

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

โครงสร้างมีดังนี้

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
แหล่งที่มา

3

ดังที่ subarachnid กล่าวว่า overflow-x ซ่อนอยู่สำหรับทั้ง body และ html ทำงานนี่คือตัวอย่างการทำงาน

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

ลิงค์

— Skylin R
แหล่งที่มา

1

ฉันเพิ่งทำสิ่งนี้มาสองสามชั่วโมงแล้วลองชุดสิ่งต่าง ๆ จากหน้านี้และหน้าอื่น ๆ สิ่งที่ได้ผลสำหรับฉันในที่สุดคือการทำให้ div wrapper ของไซต์เป็นไปตามที่แนะนำในคำตอบที่ยอมรับ แต่เพื่อตั้งค่าโอเวอร์โฟลว์ทั้งสองให้ซ่อนอยู่แทนที่จะเป็นแค่โอเวอร์โฟลว์ x หากฉันปล่อยให้โอเวอร์โฟลว์ -y ที่ scroll ฉันจะจบลงด้วยเพจที่เลื่อนในแนวตั้งด้วยพิกเซลเพียงไม่กี่พิกเซลเท่านั้นและหยุดลง

#all-wrapper {
  overflow: hidden;
}

แค่นี้ก็เพียงพอแล้วโดยไม่ต้องตั้งค่าใด ๆ กับเนื้อหาหรือองค์ประกอบ HTML

— highfellow
แหล่งที่มา

1

ฉันได้ลองหลายวิธีจากคำตอบในหัวข้อนี้ส่วนใหญ่ใช้งานได้ แต่มีผลข้างเคียงเช่นถ้าฉันใช้ overflow-x บนbody,htmlอาจทำให้ / หยุดหน้าเมื่อผู้ใช้เลื่อนลงบนมือถือ

ใช้position: fixedบน wrapper / div ภายในร่างกายก็ดีเหมือนกัน แต่เมื่อฉันมีเมนูและใช้ Javascript คลิกที่เคลื่อนไหวแบบเลื่อนได้ในบางส่วนมันไม่ทำงาน

ดังนั้นฉันตัดสินใจที่จะใช้touch-action: pan-y pinch-zoomกับเสื้อคลุม / div ภายในร่างกาย แก้ไขปัญหา.

— จิรายุแอล
แหล่งที่มา

0

วิธีเดียวในการแก้ไขปัญหานี้สำหรับ modal bootstrap ของฉัน (มีฟอร์ม) คือการเพิ่มรหัสต่อไปนี้ใน CSS ของฉัน:

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

— โทเบียส
แหล่งที่มา