Overflow-x: tersembunyi tidak mencegah konten meluap di browser seluler

142

Saya punya situs web di sini .

Dilihat di peramban desktop, bilah menu hitam hanya memanjang sampai ke tepi jendela, karena bodysudah overflow-x:hidden.

Di peramban seluler apa pun, baik Android atau iOS, bilah menu hitam menampilkan lebar penuhnya, yang membawa spasi putih di kanan halaman. Sejauh yang saya tahu, spasi putih ini bahkan bukan bagian dari htmlatau bodytag.

Bahkan jika saya mengatur viewport ke lebar tertentu di <head>:

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

Situs diperluas ke 1100px tetapi masih memiliki spasi lebih dari 1100.

Apa yang saya lewatkan? Bagaimana cara menjaga viewport ke 1100 dan memotong overflow?

css overflow viewport mobile-browser Indigenuity
sumber

1

Ini khususnya masalah di iOS9

Chuck Le Butt

269

Membuat div pembungkus situs di dalam <body>dan menerapkannya overflow-x:hiddenke pembungkus bukan <body>atau <html>memperbaiki masalah.

Tampaknya browser yang mengurai <meta name="viewport">tag cukup mengabaikan overflowatribut pada htmldan bodytag.

Catatan: Anda juga mungkin perlu menambahkan position: relativediv pembungkus.

Indigenuity
sumber

44

Saya menemukan bahwa selain mengatur overflowke hidden, saya harus mengatur positionke fixed...

Victor S

16

Menambahkan posisi ke perbaikan membuat saya tidak dapat menggulir!

berteori

5

Saya mencoba, saya meletakkan semua kode saya di dalam div dan memberikannya overflow-x: disembunyikan tetapi tidak berfungsi, saya menambahkan <meta name = "viewport" content = "width = lebar perangkat, skala awal = 1"> juga tetapi tidak ada yang berubah: / ada ide?

4

@ sleepowers overflow-x: hiddenmasih tidak berfungsi untuk saya bahkan setelah saya menambahkan tag meta ini. Bisakah Anda membagikan tautan ke situs web Anda di mana ia bekerja?

jupiteror

3

Hei geng, ketika saya menemukan itu position:relativebekerja juga.

Thomas Valadez

80

mencoba

html, body {
  overflow-x:hidden 
}

bukannya adil

body {
  overflow-x:hidden 
}

subarachnid
sumber

7

Terima kasih, tetapi aplikasi overflowapa pun untuk htmldan / atau bodydalam kombinasi apa pun tidak menyelesaikan masalah.

Indigenuity

Maaf itu tidak berhasil untuk Anda. Sebelum saya menjawab saya membuat tes cepat menggunakan situs Anda dan menerapkan saran saya ke css Anda. Itu memperbaiki masalah untuk browser standar dan lumba-lumba di ponsel android saya setidaknya.

subarachnid

3

Bekerja untukku. eduardd.eu/projects/ezo (antara 480 dan 992px footer memiliki masalah dengan citra wanita dan handuk yang meluap-luap)

Eduard

2

Adakah yang tahu mengapa ini bekerja, ketika menentukan tubuh {} dan html {} secara terpisah tidak?

hamncheez

1

Dalam perlu menambahkan height:100%;juga, jika tidak gulir vertikal tidak akan berfungsi dengan baik pada halaman dengan memuat gambar (yang membuat halaman tumbuh tinggi).

Arno van Oordt

69

Komentar VictorS tentang jawaban yang diterima layak menjadi jawaban itu sendiri karena itu adalah solusi yang sangat elegan yang memang berhasil. Dan saya akan menambahkan sedikit kegunaannya.

Catatan Victor menambahkan position:fixedkarya.

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

Dan memang benar. Namun, itu juga memiliki sedikit efek samping pada dasarnya menggulir ke atas. position:absolutemengatasi ini tetapi, memperkenalkan kembali kemampuan untuk menggulir di ponsel.

Jika Anda tahu viewport Anda ( plugin saya untuk menambahkan viewport ke<body> ), Anda bisa menambahkan css toggle untuk 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; 
}

Saya juga menambahkan ini untuk mencegah halaman yang mendasarinya dari melompat ke kiri / kanan ketika menampilkan / menyembunyikan modals.

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

Brad
sumber

2

Apakah ada cara untuk mendapatkan bagian ponsel agar tidak melompat ke atas?

WraithKenny

1

Apa yang berhasil bagi saya adalah mengubah elemen yang seharusnya disembunyikan dengan meluap dari posisi: absolut ke posisi: tetap. Untungnya

Chuck Le Butt

1

@WraithKenny - Jika Anda ingin halaman mencegah melompat ke atas di perangkat seluler, Anda dapat menggunakan pendekatan hack'ish / ugly berikut. Di dalam fungsi modal Anda, pastikan Anda mendapatkan offset gulir saat ini sebelum melakukan apa pun, selain menerapkan gaya modal bersama dan juga mengatur margin atas tubuh Anda sama dengan minus dari offset saat ini. Pastikan ketika Anda menghapus modal Anda, atur margin kembali ke 0 dan gulir halaman kembali ke offset asli.

Emil Borconi

2

Solusi ini hanya berfungsi jika konten modal Anda sesuai dengan layar, yaitu Anda tidak perlu menggulir modal itu sendiri.

Tobias

Ada elemen diposisikan tetap dan mutlak lainnya di halaman saya juga. Membuat tubuh position:fixed or absolutemengganggu posisi mereka juga. Tidak cocok / bekerja dalam kasus saya :(

sohaiby

31

Ini adalah solusi paling sederhana untuk menyelesaikan pengguliran horizontal di Safari.

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

Waltur Buerk
sumber

1

Sepertinya berhasil. Tetapi apakah Anda memiliki penjelasan mengapa ini berhasil?

LarS

Tidak, akhirnya tidak berhasil. Saya akhirnya melakukan matematika dan memastikan bahwa div tidak lebih lebar dari yang diizinkan, css calc () banyak membantu saya di sini karena memungkinkan campuran lebar relatif (vw atau%) dan lebar absolut (px).

LarS

Tentu ini adalah solusi. Masih ada sesuatu yang meluap di suatu tempat, hanya terputus sekarang. Coba tambahkan aturan css: * {outline: 1px solid red; } Jika Anda masih tidak dapat menemukan elemen melimpah, maka itu mungkin disebabkan oleh margin di suatu tempat. Coba tambahkan * {margin: 0! PENTING; } dan lihat apakah overflow menghilang.

Waltur Buerk

Bekerja untukku. Menarik bahwa elemen tersembunyi mengubah lebar tubuh. Bagi saya, bagaimanapun, ini adalah kasus untuk SEMUA browser Safari, tidak hanya yang mobile. Baru saja memperbaiki table-responsiveBug Bootstrap 4 . Ini solusinya.

CunningFatalist

2

Saya tidak percaya ini masih menjadi masalah pada tahun 2019. Tetapi solusi di atas benar-benar berhasil. Terima kasih.

staxim

28

Seperti yang dinyatakan oleh @Indigenuity, ini tampaknya disebabkan oleh browser yang menguraikan <meta name="viewport">tag.

Untuk mengatasi masalah ini di sumbernya, coba yang berikut ini:

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

Dalam pengujian saya, hal ini mencegah pengguna melakukan zoom out untuk melihat konten yang meluap, dan sebagai hasilnya mencegah panning / menggulir ke sana juga.

Tempurturtul
sumber

Menambahkan initial-scale=1ke metatag viewport yang ada memang memperbaiki masalah. Terima kasih!

JamesWilson

6

Bagi saya itu minimum-scale=1yang memperbaikinya

jpenna

Inilah yang sebenarnya bekerja untuk saya setelah mencoba yang lain. Terima kasih banyak !

Harsh Limaye

16

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

bekerja di iOS9

ollio
sumber

3

Itu bekerja, tetapi menempatkan posisi: tetap pada tubuh Anda memang membuat Anda menggulir ke atas

ThaoD5

1

Aneh tetapi itu bekerja untuk saya tanpa posisi tetap, juga. Hanya satu dari semua solusi di sini!

Garavani

Hanya satu yang bekerja untuk saya, menggunakan chrom dan boostrap + angularJS

kiwicomb123

6

Jaga agar viewport tidak tersentuh: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Dengan asumsi Anda ingin mencapai efek bilah hitam kontinu ke sisi kanan: #menubartidak boleh melebihi 100% , sesuaikan jari - jari batas sedemikian rupa sehingga sisi kanan kuadrat dan sesuaikan bantalan sehingga meluas sedikit lebih ke kanan . Ubah yang berikut ini untuk Anda #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*/

Menyesuaikan paddingke 10px tentu saja meninggalkan menu kiri ke tepi bar, Anda dapat menempatkan 40px yang tersisa untuk masing-masing li, 20px di setiap sisi kiri dan kanan:

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

Ketika Anda mengubah ukuran browser lebih kecil, Anda masih akan menemukan latar belakang putih: tempatkan tekstur latar belakang Anda dari div ke body. Atau sebagai alternatif, sesuaikan lebar menu navigasi dari 100% ke nilai yang lebih rendah menggunakan kueri media. Ada banyak penyesuaian yang harus dilakukan pada kode Anda untuk membuat tata letak yang tepat, saya tidak yakin apa yang ingin Anda lakukan tetapi kode di atas entah bagaimana akan memperbaiki bar yang meluap.

Anne
sumber

jika Anda menggunakan box-sizing: border-box;Anda dapat menambahkan padding ke div lebar 100%.

Charles John Thompson III

6

Membuat div pembungkus situs di dalam tubuh dan menerapkan overflow-> x: disembunyikan ke wrapper BUKAN tubuh atau html memperbaiki masalah.

Ini bekerja untuk saya setelah juga menambah position: relativebungkusnya.

Isaac F
sumber

Ini berhasil untuk saya. Efek sampingnya adalah saya punya dua bilah gulir, bukan satu. Solusinya adalah membuatnya overflow: hiddenbukan overflow-x: hidden. Bekerja di Safari seluler, Chrome, IE11 di OSX dan Win.

pop

4

Menambahkan pembungkus di <div>sekitar keseluruhan konten Anda memang akan berfungsi. Sementara secara semantik "icky", saya menambahkan div dengan kelas overflowWrap tepat di dalam bodytag dan kemudian mengatur set CSS saya seperti ini:

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

Mungkin berlebihan sekarang, tetapi bekerja seperti pesona!

MBurnette
sumber

4

Saya mengalami masalah yang sama dengan perangkat Android tetapi tidak pada perangkat iOS. Berhasil menyelesaikan dengan menentukan posisi: relatif di div luar elemen yang benar-benar diposisikan (dengan overflow: disembunyikan untuk div luar)

Kwok Pan Fung
sumber

4

Tidak ada solusi tunggal sebelumnya yang bekerja untuk saya, saya harus mencampurnya dan memperbaiki masalah pada perangkat yang lebih lama (iphone 3).

Pertama, saya harus membungkus konten html menjadi div luar:

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

Kemudian saya harus menerapkan overflow yang disembunyikan ke pembungkus, karena overflow-x tidak berfungsi:

  #wrapper {
    overflow: hidden;
  }

dan ini memperbaiki masalah.

spagetticode
sumber

Bagaimana ini berbeda dengan jawaban @ Indigenuity?

Ian Kemp

3

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

spaghetticode

3

Saya memecahkan masalah dengan menggunakan overflow-x: hidden; sebagai berikut

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

struktur adalah sebagai berikut

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
sumber

3

Seperti yang dikatakan subarachnid, overflow-x disembunyikan untuk tubuh dan html berfungsi. Ini contoh yang berfungsi

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

Tautan

Skylin R
sumber

1

Saya baru saja mengerjakan ini selama beberapa jam, mencoba berbagai kombinasi hal dari halaman ini dan lainnya. Hal yang berhasil bagi saya pada akhirnya adalah membuat div pembungkus situs, seperti yang disarankan dalam jawaban yang diterima, tetapi untuk mengatur kedua overflow ke tersembunyi, bukan hanya x overflow. Jika saya membiarkan overflow-y pada scroll, saya berakhir dengan halaman yang hanya menggulir secara vertikal beberapa piksel dan kemudian berhenti.

#all-wrapper {
  overflow: hidden;
}

Cukup ini saja, tanpa mengatur apa pun pada elemen tubuh atau html.

highfellow
sumber

1

Saya telah mencoba banyak cara dari balasan dalam topik ini, sebagian besar bekerja tetapi mendapat beberapa efek samping seperti jika saya menggunakan overflow-x di body,htmlatasnya mungkin memperlambat / membekukan halaman ketika pengguna gulir ke bawah di ponsel.

gunakan position: fixedpada wrapper / div di dalam tubuh juga bagus, tetapi ketika saya memiliki menu dan menggunakan Javascript klik gulir animasi ke beberapa bagian, Ini tidak berfungsi.

Jadi, saya memutuskan untuk menggunakan touch-action: pan-y pinch-zoompembungkus / div di dalam tubuh. Masalah terpecahkan.

Jirayu L
sumber

0

Satu-satunya cara untuk memperbaiki masalah ini untuk modal bootstrap saya (berisi formulir) adalah dengan menambahkan kode berikut ke CSS saya:

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

Tobias
sumber

Overflow-x: tersembunyi tidak mencegah konten meluap di browser seluler

Jawaban: