Bir iframe üzerinde yatay kaydırma çubuğu gizlensin mi?

110

Css, jquery veya js kullanarak bir iframe üzerindeki yatay scollbar'ı gizlemem gerekiyor.

— nkcmr
kaynak

1

olası yineleme: Safari / Chrome (Webkit) - iframe dikey kaydırma çubuğu ve diğerleri

— Matt Ball

iframe, üst sayfayla aynı alanda değil.

— nkcmr

overflow-y: gizli; Google Chrome, Safari ve Opera'da çalışmıyor. Jsfiddle.net/m5Btd/3

— phangia2712

208

Bunu bir kombinasyonla yapmayı öneririm

CSS overflow-y: hidden;
scrolling="no" (HTML4 için)
~~ve seamless="seamless"(HTML5 için)~~*

^{* seamlessÖzellik standarttan kaldırılmıştır ve hiçbir tarayıcı bunu desteklememektedir.}

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}

<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>

Snippet'i genişlet

— Chase Florell
kaynak

9

Örneğinizi Chrome 15'e yükledim ve hala kaydırma çubuklarını görüyorum.

— Dan

61

scrolling="no"Özniteliğin iframe'e eklenmesi, Chrome'daki kaydırma çubuklarını kaldırıyor gibi görünüyor.

— Nick

2

@Nick En azından bilgisayarımda kromda kaldırmıyor. img339.imageshack.us/img339/6685/chromelj.png

— l46kok

1

@ l46kok ekran görüntünüz şunları içermiyorscrolling="no"

— Chase Florell

3

Not seemless niteliği halen önemli tarayıcılarda herhangi biri tarafından desteklenmemektedir . caniuse.com/#feat=iframe-seamless

— Liyali

26

scrolling="no"iframe'inizde özelliği ayarlayın .

— Rahul Dadhich
kaynak

15

İçinizdeki belgenin kodunu değiştirmenize izin veriliyorsa iframeve bu içerik yalnızca üst penceresi kullanılarak görülebiliyorsa, aşağıdaki CSS'yi sayfanıza eklemeniz yeterlidir iframe:

body {
    overflow:hidden;
}

İşte çok basit bir örnek:

http://jsfiddle.net/u5gLoav9/

Bu çözüm şunları yapmanızı sağlar:

Üzerinde scrolling="no"özniteliğe ihtiyaç duymadığından HTML5'inizi geçerli tutun iframe(HTML5'teki bu özellik kullanımdan kaldırılmıştır).
CSS taşması kullanan tarayıcıların çoğunda çalışır : gizli
JS veya jQuery gerekmez.

Notlar:

Kaydırma çubuklarına yatay olarak izin vermemek için bunun yerine şu CSS'yi kullanın:

overflow-x: hidden;

— GibboK
kaynak

2

Bu cevap yalnızca Bootstrap kullanan web siteleri için geçerlidir. Bootstrap'in duyarlı yerleştirme özelliği kaydırma çubuklarıyla ilgilenir.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

— Razan Paul
kaynak