Saya perlu menyembunyikan scollbar horizontal di iframe menggunakan css, jquery atau js.
Saya perlu menyembunyikan scollbar horizontal di iframe menggunakan css, jquery atau js.
Jawaban:
Saya sarankan melakukan ini dengan kombinasi
overflow-y: hidden;
scrolling="no"
(untuk HTML4)seamless="seamless"
(untuk HTML5)* seamless
Atribut 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>
scrolling="no"
atribut ke iframe tampaknya menghapus scrollbar di Chrome.
scrolling="no"
setel scrolling="no"
atribut di iframe Anda.
Jika Anda diizinkan untuk mengubah kode dokumen di dalam Anda iframe
dan konten itu hanya terlihat menggunakan jendela induknya, cukup tambahkan CSS berikut di Anda iframe
:
body {
overflow:hidden;
}
Berikut contoh yang sangat sederhana:
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;
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/