Sembunyikan scrollbar horizontal di iframe?

110

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

— 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

208

Saya sarankan melakukan ini dengan kombinasi

CSS overflow-y: hidden;
scrolling="no" (untuk HTML4)
~~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