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

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