Nonaktifkan bilah gulir vertikal pada luapan div: otomatis

113

Apakah mungkin untuk mengizinkan hanya bilah gulir horizontal saat menggunakan overflow: auto (atau scroll)?

html css scroll scrollbar joedborg
sumber
Perhatikan bahwa margin-bottomdengan nilai negatif akan mengacaukan overflow-y: hiddendll.
Andrew

Jawaban:

232

Kedua properti CSS ini dapat digunakan untuk menyembunyikan scrollbar:

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal
Luke
sumber
@Coulton Bagaimana dengan safari dan chrome?
QMaster
Menurut ini, ini berfungsi di Safari dan saya tahu ini berfungsi di Chrome.
Lukas
3
Perlu disebutkan bahwa Anda masih dapat menggulir di div menggunakan tab, asalkan ada tautan atau elemen input di luapan tersembunyi
William Brochmann
40

Anda harus menggunakan saja

overflow-y:hidden; - Gunakan ini untuk menyembunyikan gulungan Vertikal

overflow-x:auto; - Gunakan ini untuk menampilkan gulir Horizontal

Lukas menyebut keduanya tersembunyi. jadi saya telah memberikan ini secara terpisah.

Siva Charan
sumber
21

melimpah: otomatis;
overflow-y: tersembunyi;

Untuk IE8: -ms-overflow-y: hidden;

Atau Lain:

Untuk menyembunyikan X :

<div style="height:150x; width:450px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"></div>

Untuk menyembunyikan Y :

<div style="height:150px; width:450px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"></div>
Orang Acak
sumber
8

Jika Anda ingin mencapai hal yang sama di Gecko (NS6 +, Mozilla, dll) dan IE4 + secara bersamaan, saya yakin ini harus dilakukan: V

body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;
}

Ini akan diterapkan ke seluruh tag badan, perbarui ke css Anda yang relevan dan terapkan properti ini.

Nirav Mehta
sumber
2

Tambahkan berikut ini:

body{
overflow-y:hidden;
}
Zeinab
sumber
1

Aturan ini kompatibel dengan semua browser:

body {overflow: hidden; }
body::-webkit-scrollbar { width: 0 !important; }
body { overflow: -moz-scrollbars-none; }
body { -ms-overflow-style: none; }
tamueka
sumber
1

Bagaimana dengan notasi steno?

{overflow: auto hidden;}
Chong Lip Phang
sumber
0

jika Anda ingin menonaktifkan scrollbar, tetapi masih dapat menggulir konten DIV bagian dalam, gunakan kode di bawah ini di css,

.divHideScroll::-webkit-scrollbar {
    width: 0 !important
}
.divHideScroll {
    overflow: -moz-scrollbars-none;
}
.divHideScroll {
    -ms-overflow-style: none;
}

divHideScroll adalah nama kelas dari div target.

Ini akan bekerja di semua browser utama (Chrome, Safari, Mozilla, Opera, dan IE)

Tahir Alvi
sumber