Nonaktifkan bilah gulir vertikal pada luapan div: otomatis


113

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


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

@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.


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>

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.


2

Tambahkan berikut ini:

body{
overflow-y:hidden;
}

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; }


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)

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.