Hapus scrollbar dari iframe

117

Menggunakan kode ini

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

Beginilah tampilannya (kotak teriakan di beranda http://www.talkjesus.com )

Bagaimana cara menghapus scrollbar horizontal dan mengubah css dari scrollbar vertikal?

html css iframe Keyakinan Pada Hal-Hal yang Tak Terlihat
sumber
2
duplikat dengan stackoverflow.com/questions/4856746/… yang memiliki jawaban yang lebih baik
Daniël Tulp

Jawaban:

9

di css Anda:

iframe{
    overflow:hidden;
}
takien
sumber
7
Terima kasih, tapi gulir horizontal saja dan masih muncul di Firefox. Tidak muncul di Chrome atau IE. Selain itu, CSS untuk scrollbar diterapkan secara efektif hanya di IE, bukan FF atau Chrome (yang terakhir menampilkan warna / bayangan krem ​​yang tampak default).
Keyakinan Pada Hal-Hal yang Tak Terlihat
3
Ini tidak akan berfungsi karena luapan terjadi di dokumen iframe, yang biasanya tidak dapat Anda ubah karena batasan keamanan iframe lintas domain.
thdoan
54
Ini tidak berfungsi karena ini tidak akan memengaruhi konten iframe, hanya iframe itu sendiri. Solusinya adalah scrolling = "no".
TheLD
4
Ini adalah jawaban yang salah, tidak menghapus scrollbar di google chrome, tetapi scrolling = "no" tidak.
Anders Lindén
@LarsVandeDonk Jawaban Anda harus menjadi solusi yang tepat.
Wong Jia Hau
314

Tambahkan scrolling="no"atribut ke iframe.

BERKEMBANG
sumber
1
dapat melakukan ini dengan css?
Evorlor
1
Ya, tapi kemudian di Chrome tidak dapat menggunakan scrollIntoView. Lihat code.google.com/p/chromium/issues/detail?id=137214
Peter Brand
1
nah, ini menyembunyikan bilah gulir konten, dan mencegah pengguliran konten. itu tidak mencegah scrollbar iframe untuk muncul.
Dave Cousineau
3
Atribut scrolling di iframe sekarang resmi kedaluwarsa. CSS harus digunakan sebagai gantinya.
Mike Poole
4
@MikePoole Mungkin secara resmi sudah usang, tetapi tidak membantu pengaturan overflow:hidden;di Chrome 65.0.3325.181, tetapi scrolling="no"membantu.
sekitar
28

Ini berfungsi di semua browser. jsfiddle di sini http://jsfiddle.net/zvhysct7/1/

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>
Thyagarajan C
sumber
21

Menambahkan scroll="no"dan style="overflow:hidden"di iframe tidak berfungsi, saya harus menambahkan style="overflow:hidden"badan dokumen html yang dimuat di dalam iframe.

nirwana74v
sumber
1
Jika ini membantu, ada masalah di Firefox, di mana jika Anda memiliki elemen CSS transform: scale(0.7)atau semacamnya, ini akan membuat scrollbar (yang akan muncul di iFrame Anda), kecuali jika Anda memotongnya dengan overflow: hidden;leluhur (bisa berupa div, bukan tubuh).
WraithKenny
8
Itu karena 'scrolling = no', bukan 'scroll = no'.
Bryan Green
maksud Anda dimuat di dalam kami dimuat di sekitar? Ada apa di sekitar apa?
João Pimentel Ferreira
dimuat di dalam <iframe src = "/ test.html"> di mana test.html memiliki pengaturan ini.
nirvana74v
16

Coba tambahkan scrolling="no"atribut seperti di bawah ini:

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>
Luaskan cuplikan

Allabux B
sumber
11

Cukup Tambahkan scrolling="no"dan seamless="seamless"atribut ke tag iframe. seperti ini:-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"
Nima Rahbar
sumber
13
Atribut mulus telah dihapus dari HTML .
neopickaze
Anda harus menggunakan css, bukan atribut tanpa batas.
Nima Rahbar
@NimaRahbar Atribut seamless mungkin sudah usang, tetapi css tidak mendukung parameter iframe.
Keranjang Terbengkalai
9

Jika ada orang di sini adalah memiliki masalah dengan menonaktifkan scrollbar pada iframe, bisa jadi karena konten iframe memiliki scrollbar pada unsur-unsur di bawah ini htmlelemen!

Beberapa tata letak disetel htmldan bodytinggi 100%, dan menggunakan #wrapperdiv dengan overflow: auto;(atau scroll), sehingga memindahkan pengguliran ke #wrapperelemen.

Dalam kasus seperti itu, tidak ada yang Anda lakukan yang akan mencegah scrollbar muncul kecuali mengedit konten halaman lain.

WraithKenny
sumber
8 
<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

Gunakan div di atas dan itu tidak akan menampilkan scroll bar di browser manapun.

KnightFury
sumber
3
seamlessatribut bukan HTML5 yang valid, tidak didukung oleh sebagian besar browser ( caniuse.com/#search=seamless ), dan sebagian besar gaya lainnya tidak diperlukan.
Pere
8

Tambahkan ini di css Anda untuk menyembunyikan kedua bilah gulir

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}
Deepika Patel
sumber
6

Ini adalah pilihan terakhir, tetapi patut disebutkan - Anda dapat menggunakan ::-webkit-scrollbarelemen semu pada orang iframetua untuk menyingkirkan bilah gulir 90-an yang terkenal itu.

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

Sunting: meskipun relatif didukung , ::-webkit-scrollbarmungkin tidak cocok untuk semua browser. gunakan dengan hati-hati :)

DotBot
sumber
2
Ini adalah satu-satunya jawaban yang membantu saya. Anda masih dapat menggulir tetapi Anda tidak melihat bilah gulir yang jelek. Terima kasih!
Karmidzhanov
4

Tambahkan ini di css Anda untuk menyembunyikan bilah gulir horizontal saja

iframe{
    overflow-x:hidden;
}
Abhidev
sumber
3 
iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

Seperti ini, Anda membuat lebar Iframe lebih besar dari yang seharusnya. Kemudian Anda menyembunyikan scrollbar horizontal dengan overflow-x: hidden.

Nico Grill
sumber