Sembunyikan scrollbar horizontal di iframe?

110

Saya perlu menyembunyikan scollbar horizontal di iframe menggunakan css, jquery atau js.

html iframe scrollbar hide nkcmr
sumber
1
kemungkinan duplikat: Safari / Chrome (Webkit) - Tidak dapat menyembunyikan scrollbar vertikal iframe dan lainnya
Matt Ball
iframe tidak berada di domain yang sama dengan halaman induk.
nkcmr
overflow-y: tersembunyi; Tidak berfungsi di Google Chrome, Safari, dan Opera. Cobalah dengan jsfiddle.net/m5Btd/3
phangia2712

Jawaban:

208

Saya sarankan melakukan ini dengan kombinasi

  1. CSS overflow-y: hidden;
  2. scrolling="no" (untuk HTML4)
  3. dan seamless="seamless"(untuk HTML5)*

* seamlessAtribut telah dihapus dari standar, dan tidak ada browser yang mendukungnya.

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>
Luaskan cuplikan

Kejar Florell
sumber
9
Saya memuat contoh Anda di Chrome 15 dan masih melihat scrollbar.
Dan
61
Menambahkan scrolling="no"atribut ke iframe tampaknya menghapus scrollbar di Chrome.
Nick
2
@Nick Itu tidak menghapusnya di chrome setidaknya di komputer saya. img339.imageshack.us/img339/6685/chromelj.png
l46kok
1
@ l46kok tangkapan layar Anda tidak termasukscrolling="no"
Chase Florell
3
Perhatikan bahwa atribut tampaknya saat ini tidak didukung oleh browser utama mana pun . caniuse.com/#feat=iframe-seamless
Liyali
26

setel scrolling="no"atribut di iframe Anda.

Rahul Dadhich
sumber
15

Jika Anda diizinkan untuk mengubah kode dokumen di dalam Anda iframedan konten itu hanya terlihat menggunakan jendela induknya, cukup tambahkan CSS berikut di Anda iframe:

body {
    overflow:hidden;
}

Berikut contoh yang sangat sederhana:

http://jsfiddle.net/u5gLoav9/

Solusi ini memungkinkan Anda untuk:

  • Buat Anda tetap valid HTML5 karena tidak memerlukan scrolling="no"atribut pada iframe(atribut di HTML5 ini sudah tidak digunakan lagi).

  • Bekerja di sebagian besar browser yang menggunakan CSS overflow: hidden

  • Tidak perlu JS atau jQuery.

Catatan:

Untuk melarang bilah gulir secara horizontal, gunakan CSS ini sebagai gantinya:

overflow-x: hidden;
GibboK
sumber
2

Jawaban ini hanya berlaku untuk situs web yang menggunakan Bootstrap. Fitur embed responsif dari Bootstrap menangani scrollbar.

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