Apakah overflow: hidden diterapkan pada <body> berfungsi di iPhone Safari?

131

Apakah overflow:hiddenberlaku untuk <body>iPhone Safari? Sepertinya tidak. Saya tidak dapat membuat pembungkus di seluruh situs web untuk mencapai itu ...

Apakah Anda tahu solusinya?

Contoh: Saya memiliki halaman yang panjang, dan saya ingin menyembunyikan konten yang berada di bawah "lipatan", dan itu harus berfungsi pada iPhone / iPad.

— Francesco
sumber

1

Putus asa mencari untuk menemukan jawaban untuk ini sendiri.

— mwilcox

115

Saya memiliki masalah yang sama dan menemukan bahwa menerapkan overflow: hidden;keduanya htmldan bodymemecahkan masalah saya.

html,
body {
    overflow: hidden;
}

Untuk iOS 9, Anda mungkin perlu menggunakan ini sebagai gantinya: (Terima kasih chaenu!)

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

— Alex Haas
sumber

12

Ini tidak berfungsi di iOS Safari. Posisi: relatif juga diperlukan.

— Kevin Borders

5

Ya, tambahkan relatif dan melimpah ke html + tubuh

— wutang

3

ini tidak bekerja di iOS 9, bahkan menggunakan posisi relatif pada tubuh dan html

— Charles John Thompson III

1

Sebuah kata peringatan, luapan yang disembunyikan pada tag <html> akan memecah acara gulir jQuery

— Brett Gregson

2

Ini tidak berfungsi untuk saya di iOS 9, Safari. Tubuh masih dapat digulir, juga setelah menambahkan position: relative.

— Edo

87

body {
  position:relative; // that's it
  overflow:hidden;
}

— laFunk
sumber

3

TERIMA KASIH. KAMU. Saya memiliki masalah besar ketika elemen-elemen dialihkan dari luar viewport, ke dalam. Akan ada bug aneh di mana konten diperluas. Ini solusi untuk saya!

— Eric

48

Dalam kasus saya menambahkan "posisi: relatif" tidak membantu tetapi menambahkan "posisi: tetap" berfungsi.

— LeastOne

1

Yip ini berhasil. Saya sedang membangun sebuah situs di mana mereka ingin mobile nav membahas konten - tetapi ketika itu membuka konten di belakang nav di latar belakang masih gulir. Jawaban lain dengan posisi, overflow & tinggi juga berfungsi tetapi dengan tinggi halaman melompat ke atas ketika saya membuka nav. Saya kira itu unik untuk situasi saya, tetapi saya pikir saya akan menyebutkannya kalau-kalau ada orang lain yang overavated dengan masalah yang sama.

— moonunit7

Kemana perginya pembungkus? Bagaimana ini jawaban yang lengkap?

— Kugel

8

Menambahkan posisi tetap memang mengatasi masalah, tetapi itu membuat halaman melompat ke atas, yang buruk bagi UX jika Anda menerapkan ini di latar belakang saat Anda menyajikan menu atau modal. Untuk membuat UX yang baik, Anda harus, sebelum mengunci posisi, menyimpan posisi gulir halaman, dan kemudian menerapkannya kembali setelah dibuka.

— mike

27

Beberapa solusi yang tercantum di sini memiliki beberapa gangguan aneh ketika meregangkan gulungan elastis. Untuk memperbaikinya saya menggunakan:

body.lock-position {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

Sumber: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

— Davey
sumber

4

Ini bagus (lebih baik dalam kasus saya daripada position: relative), namun, posisi gulir hilang setelah mengembalikan styling standar (misalnya, menu penutup).

— jmarceli

1

Untuk posisi gulir, Anda dapat menggunakan js (jquery dalam contoh ini) melakukan sesuatu seperti ini:

// on menu open   // save window pos   $('body').attr( 'data-pos', $(window).scrollTop() ) ;   // ...   // on menu close   // scroll to saved window pos   $( window ).scrollTop( $('body').attr( 'data-pos' ) );

— Davey

Itu benar-benar memberi tanda bagi saya!

— D.Steinel

8

Apakah masalah ini hari ini di iOS 8 & 9 dan tampaknya kita sekarang perlu menambah tinggi: 100%;

Jadi, tambahkan

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}

— chaenu
sumber

4

Menggabungkan jawaban dan komentar di sini dan pertanyaan serupa di sini berhasil untuk saya.

Jadi posting sebagai jawaban keseluruhan.

Inilah cara Anda perlu meletakkan pembungkus di sekitar konten situs Anda, tepat di dalam <body>tag.

 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <!-- other meta and head stuff here -->
 <head>
 <body>
     <div class="wrapper">
         <!-- Your site content here -->
     </div>
 </body>
 </html>

Buat kelas pembungkus seperti di bawah ini.

.wrapper{
    position:relative; //that's it
    overflow:hidden;
}

Saya juga mendapat ide dari jawaban ini di sini .

Dan jawaban ini di sini juga sudah cukup matang. Sesuatu yang mungkin akan bekerja sama baiknya di kedua desktop dan perangkat.

— Devraj Gadhavi
sumber

Ini solusi untuk saya.

— Roel Magdaleno

1

Ini menyebabkan halaman bergulir ke atas untuk saya ketika modal ditutup.

— Jason

4

Ini bekerja di browser Safari.

html,
body {
  overflow: hidden;
  position: fixed
}

— Sridhar
sumber

4

Bagi saya ini:

height: 100%; 
overflow: hidden; 
width: 100%; 
position: fixed;

Tidak cukup, saya tidak bekerja di iOS di Safari. Saya juga harus menambahkan:

top: 0;
left: 0;
right: 0;
bottom: 0;

Untuk membuatnya bekerja dengan baik. Bekerja dengan baik sekarang :)

— Loosie94
sumber

2

Saya sudah bekerja dengan <body>dan<div class="wrapper">

Saat munculan terbuka ...

<body> mendapat ketinggian 100% dan limpahan: disembunyikan

<div class="wrapper"> mendapat posisi: relatif; meluap: tersembunyi; tinggi: 100%;

Saya menggunakan JS / jQuery untuk mendapatkan posisi gulir halaman yang sebenarnya dan menyimpan nilai sebagai atribut data ke tubuh

Lalu saya gulir ke posisi gulir di .wrapper DIV (bukan di jendela)

Ini solusinya:

JS / jQuery:

// when popup opens

$('body').attr( 'data-pos', $(window).scrollTop()); // get actual scrollpos
$('body').addClass('locked'); // add class to body
$('.wrapper').scrollTop( $('body').attr( 'data-pos' ) ); // let wrapper scroll to scrollpos

// when popup close

$("body").removeClass('locked');
$( window ).scrollTop( $('body').attr( 'data-pos' ));

CSS:

body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}

Ini berfungsi dengan baik di kedua sisi ... desktop & seluler (iOS).

Tipps dan penyempurnaan dipersilahkan :)

Bersulang!

— Toge
sumber

1

html {
  position:relative;
  top:0px;
  left:0px;
  overflow:auto;
  height:auto
}

tambahkan ini sebagai default ke css Anda

.class-on-html{
  position:fixed;
  top:0px;
  left:0px;
  overflow:hidden;
  height:100%;
}

toggleClass kelas ini untuk memotong halaman

ketika Anda mematikan baris pertama kelas ini akan memanggil scrolling bar kembali

— Musim dingin
sumber

0

Ya, ini terkait dengan pemutakhiran baru di safari yang merusak tata letak Anda sekarang jika Anda menggunakan overflow: disembunyikan untuk membersihkan divs.

— Lee McAlilly
sumber

10

Bisakah Anda lebih detail dengan ini, atau mengutip sumber? Jawaban ini mungkin benar, tetapi tidak terlalu membantu.

— pjmorse

0

Itu memang berlaku, tetapi itu hanya berlaku untuk elemen-elemen tertentu dalam DOM. misalnya, itu tidak akan berfungsi pada tabel, td, atau beberapa elemen lain, tetapi akan bekerja pada tag <DIV>.
misalnya:

<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Hanya diuji di iOS 4.3.

Suntingan kecil: Anda mungkin lebih baik menggunakan overflow: gulir sehingga dua pengguliran jari berfungsi.

— adam
sumber

0

Mengapa tidak membungkus konten yang Anda tidak ingin ditampilkan dalam elemen dengan kelas dan mengatur kelas itu ke display:nonedalam stylesheet yang dimaksudkan hanya untuk iphone dan perangkat genggam lainnya?

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->

— S16
sumber

0

Inilah yang saya lakukan: Saya memeriksa posisi tubuh, kemudian membuat tubuh tetap dan menyesuaikan bagian atas dengan negatif dari posisi itu. Sebaliknya, saya membuat badan statis dan mengatur gulir ke nilai yang saya rekam sebelumnya.

var body_x_position = 0;

function disable_bk_scrl(){

    var elb = document.querySelector('body');

    body_x_position = elb.scrollTop;
    // get scroll position in px

    var body_x_position_m = body_x_position*(-1);
    console.log(body_x_position);

    document.body.style.position = "fixed";

    $('body').css({ top: body_x_position_m });

}

function enable_bk_scrl(){  

    document.body.style.position = "static";

    document.body.scrollTo(0, body_x_position);

    console.log(body_x_position);
}

— Arie S.
sumber

-3

Cukup ubah tinggi badan <300px (ketinggian viewport seluler di landspace sekitar 300px hingga 500px)

JS

$( '.offcanvas-toggle' ).on( 'click', function() {
    $( 'body' ).toggleClass( 'offcanvas-expanded' );
});

CSS

.offcanvas-expended { /* this is class added to body on click */
    height: 200px;
}
.offcanvas {
    height: 100%;
}

— kristian lepi
sumber

Bukan solusi yang sangat elegan, dan akan menyebabkan masalah pada perangkat iOS yang lebih besar dari piksel tertentu yang akhirnya Anda pilih. Solusi yang berbeda harus digunakan.

— Badrush