<body> öğesine uygulanan overflow: hidden, iPhone Safari'de çalışır mı?

131

İPhone Safari'de çalışmak için overflow:hiddenuygulanıyor mu <body>? Öyle görünmüyor. Bunu başarmak için tüm web sitesinde bir sarmalayıcı oluşturamıyorum ...

Çözümü biliyor musun?

Örnek: Uzun bir sayfam var ve basitçe "katlamanın" altındaki içeriği gizlemek istiyorum ve iPhone / iPad'de çalışması gerekiyor.

— Francesco
kaynak

1

Bunun cevabını kendim bulmak için çaresizce arıyorum.

— mwilcox

115

Ben benzer bir sorunu vardı ve uygulayarak bulundu overflow: hidden;hem htmlve bodybenim sorun çözüldü.

html,
body {
    overflow: hidden;
}

İOS 9 için bunun yerine şunu kullanmanız gerekebilir: (Teşekkürler chaenu!)

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

— Alex Haas
kaynak

12

Bu, iOS Safari'de çalışmaz. konum: göreceli de gereklidir.

— Kevin Sınırları

5

Evet html +

— body'ye

3

Bu, vücuda ve html'ye göre konum kullanıldığında bile iOS 9'da çalışmıyor

— Charles John Thompson III

1

<html> etiketinde gizlenen bir uyarı kelimesi, taşma

— jQuery'nin

2

Bu benim için iOS 9, Safari'de çalışmıyor. Gövde eklendikten sonra da kaydırılabilir position: relative.

— Edo

87

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

— laFunk
kaynak

3

TEŞEKKÜR. SEN. Öğeler, görüntü alanının dışından içeriye aktarılırken büyük bir sorun yaşadım. İçeriğin genişletildiği garip bir hata meydana gelirdi. Bu benim için çözümdü!

— Eric

48

Benim durumumda "pozisyon: göreceli" eklemek yardımcı olmadı, ancak "pozisyon: sabit" eklendi.

— LeastOne

1

Yip bu işe yaradı. Mobil gezinmenin içeriğin üzerinden geçmesini istedikleri bir site oluşturuyorum - ancak arka planda gezinmenin arkasındaki içerik açıldığında yine de kayıyor. Konum, taşma ve yükseklik ile ilgili diğer yanıtlar da işe yaradı, ancak nav'ı açtığımda sayfa en üste atlıyor. Sanırım bu benim durumum için benzersiz, ancak overlaid nav'a sahip başka birinin de aynı sorunu yaşaması durumunda bundan bahsetmeyi düşündüm.

— moonunit7

Paketleyici nereye gidiyor? Bu nasıl tam bir cevap?

— Kugel

8

Sabit pozisyon ekleme yapar adresini sorunu, ama bir menü veya kalıcı sunmak yaparken arka planda bu uygulamaya eğer UX için kötü üst, sayfa atlama yapar. İyi bir UX oluşturmak için, konumu kilitlemeden önce sayfanın kaydırma konumunu kaydetmeniz ve ardından kilidi açıldıktan sonra yeniden uygulamanız gerekir.

— mike

27

Burada listelenen bazı çözümlerde, elastik kaydırmayı uzatırken bazı garip hatalar vardı. Kullandığım düzeltmek için:

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

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

— Davey
kaynak

4

Bu güzel (benim durumumda daha iyi çalışıyor position: relative) ancak varsayılan stil geri yüklendikten sonra kaydırma konumu kayboluyor (ör. Menü kapatılıyor).

— jmarceli

1

Kaydırma konumu için js kullanabilirsiniz (bu örnekte jquery) şunun gibi bir şey yapın:

// 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

Bu gerçekten benim için kene yaptı!

— D.Steinel

8

Bugün bu sorunu iOS 8 ve 9'da yaşadık ve görünen o ki şimdi yükseklik eklememiz gerekiyor:% 100;

Öyleyse ekle

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

— chaenu
kaynak

4

Buradaki cevapları ve yorumları ve buradaki benzer soruyu birleştirmek benim için çalıştı.

Yani bütün bir cevap olarak göndermek.

Site içeriğinizin etrafına, <body>etiketin hemen içine bir sarmalayıcı div koymanız için gerekenler aşağıda açıklanmıştır .

 <!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>

Aşağıdaki gibi sarmalayıcı sınıfını oluşturun.

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

Bu yanıttan da fikir edindim .

Ve buradaki cevabın da biraz düşünmek için yiyecekleri var. Muhtemelen hem masaüstü bilgisayarlarda hem de cihazlarda eşit derecede iyi çalışacak bir şey.

— Devraj Gadhavi
kaynak

Bu benim için çözümdü.

— Roel Magdaleno

1

Bu, modal kapatıldığında sayfanın benim için yukarı kaymasına neden oluyor.

— Jason

4

Safari tarayıcısında çalışıyor.

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

— Sridhar
kaynak

4

Benim için bu:

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

Yetmedi, iOS'ta Safari'de çalışmadım. Ayrıca eklemek zorunda kaldım:

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

İyi çalışmasını sağlamak için. Şimdi iyi çalışıyor :)

— Loosie94
kaynak

2

İle çalıştım <body>ve<div class="wrapper">

Pop-up açıldığında ...

<body> yüksekliği% 100 ve taşma: gizli

<div class="wrapper"> konumu alır: göreli; taşma: gizli; yükseklik:% 100;

Sayfanın gerçek kaydırma konumunu almak için JS / jQuery kullanıyorum ve değeri gövdeye veri özniteliği olarak depoluyorum

Sonra .wrapper DIV'deki kaydırma konumuna gidiyorum (pencerede değil)

İşte benim çözümüm:

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

Her iki tarafta da iyi çalışıyor ... masaüstü ve mobil (iOS).

İpuçları ve iyileştirmeler açığız :)

Şerefe!

— Toge
kaynak

1

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

bunu varsayılan olarak css'nize ekleyin

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

Sayfayı kesmek için bu sınıfı toggleClass

Bu sınıfı kapattığınızda ilk satır kaydırma çubuğunu geri çağıracak

— Longwinter
kaynak

0

Evet, bu, div'leri temizlemek için overflow: hidden'ı kullanırsanız, safaride düzeninizi bozan yeni güncellemelerle ilgilidir.

— Lee McAlilly
kaynak

10

Bununla daha fazla ayrıntıya girebilir misiniz veya bir kaynaktan alıntı yapabilir misiniz? Bu cevap doğru olabilir ama pek yardımcı olmuyor.

— pjmorse

0

Geçerli, ancak yalnızca DOM içindeki belirli öğeler için geçerlidir. örneğin, bir tablo, td veya diğer bazı öğeler üzerinde çalışmayacaktır, ancak bir <DIV> etiketi üzerinde çalışacaktır.
Örneğin:

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

Yalnızca iOS 4.3'te test edilmiştir.

Küçük bir düzenleme: Taşma kullanmak daha iyi olabilir: iki parmakla kaydırmanın işe yaraması için kaydırın.

— Adem
kaynak

0

Neden bir öğede gösterilmesini istemediğiniz içeriği bir sınıfla sarmalıyorsunuz ve bu sınıfı display:noneyalnızca iphone ve diğer taşınabilir cihazlar için tasarlanmış bir stil sayfasına ayarlamıyorsunuz ?

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

— S16
kaynak

0

İşte yaptığım şey: Vücudun y pozisyonunu kontrol ettim, sonra vücudu sabitledim ve üst kısmını o pozisyonun negatifine ayarladım. Tersine, gövdeyi statik hale getiriyorum ve kaydırmayı daha önce kaydettiğim değere ayarlıyorum.

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

— Koç.
kaynak

-3

Gövde yüksekliğini <300 piksel olarak değiştirin (kara alanındaki mobil görüntü alanının yüksekliği yaklaşık 300 piksel ila 500 piksel arasındadır)

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
kaynak

Çok şık bir çözüm değil ve iOS cihazlarında seçtiğiniz belirli piksellerden daha büyük sorunlara neden olur. Farklı bir çözüm kullanılmalıdır.

— Badrush