Bagaimana cara menambahkan scrollbar vertikal ke div saya secara otomatis?

110

Saya ingin menambahkan scrollbar vertikal ke file <div>. Saya sudah mencoba overflow: auto, tetapi tidak berhasil. Saya telah menguji kode saya di Firefox dan Chrome.

Saya menempelkan kode gaya div di sini:

float: left;
width: 1000px;
overflow: auto;
css html scrollbar overflow jay
sumber
a jsfiddle atau lebih css dengan markup Anda
Ritabrata Gautam
12
Coba ini: overflow-y:scrolldan beberapa ketinggian . Buka dokumen ini .
Mr_Green
Terima kasih Mr_Green atas balasan Anda. Tetapi kode ini tidak berfungsi untuk saya.
jay
Untuk membuat Scroll bekerja, konten di dalamnya harus meluap .
Mr_Green
Posting kode html dan css Anda di sini.
Mr_Green

Jawaban:

145

Anda perlu menetapkan ketinggian tertentu untuk membuat overflow: auto;properti berfungsi.
Untuk tujuan pengujian, tambahkan height: 100px;dan periksa.
dan juga akan lebih baik jika Anda memberi overflow-y:auto;daripada overflow: auto;, karena ini membuat elemen bergulir hanya vertikal tetapi tidak horizontal.

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

Jika Anda tidak mengetahui ketinggian container dan ingin menampilkan scrollbar vertikal saat container mencapai ketinggian tetap 100px, gunakan max-heightsebagai ganti heightproperti.

Untuk informasi lebih lanjut, baca artikel MDN ini .

Mr_Green
sumber
Ya, saya mendapatkan poin Anda dan mengujinya, ini berfungsi dengan baik di Chrome tetapi tidak di FireFox. Satu hal lagi yang membingungkan adalah Scrollbar vertikal muncul pada waktu muat Halaman di FF tetapi menghilang ketika pemuatan halaman selesai!
jay
"Anda perlu menetapkan beberapa ketinggian" persis masalah saya, terima kasih! : P
Wagner da Silva
51

Anda harus menambahkan max-heightproperti.

.ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}
<div class="ScrollStyle">
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
</div>
Luaskan cuplikan

DevT
sumber
20

Anda dapat mengatur:

overflow-y: scroll;height: XX px

sumber
2
ini telah disarankan oleh jawaban sebelumnya.
UmNyobe
14

Saya punya alat penggulung yang luar biasa div-popup. Untuk menerapkan, tambahkan gaya ini ke elemen div Anda:

overflow-y: scroll;
height: XXXpx;

Yang heightAnda tentukan akan menjadi tinggi div dan sekali jika Anda memiliki konten melebihi tinggi ini, Anda harus menggulirnya.

Terima kasih.

Ataboy Josef
sumber
13

Untuk menampilkan bilah gulir vertikal di div Anda, Anda perlu menambahkan

height: 100px;   
overflow-y : scroll;

atau

height: 100px; 
overflow-y : auto;
Ricardo Romo
sumber
10

Saya tidak begitu yakin untuk apa Anda mencoba menggunakan div, tapi ini adalah contoh dengan beberapa teks acak.

Mr_Green memberikan instruksi yang benar ketika dia mengatakan untuk menambahkan overflow-y: auto karena itu membatasi pengguliran vertikal. Ini adalah contoh JSFiddle:

JSFiddle

MitulP91
sumber
Pertama-tama @Mr_Green saran Anda berfungsi dengan baik di Chrome tetapi tidak di FF. Dan apakah ada alternatif untuk menambahkan Tinggi, karena saya tidak dapat menambahkan Tinggi ke Div saya untuk struktur desain saya.
jay
2 

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Luaskan cuplikan

GURU PRASAD
sumber
2
Harap tambahkan penjelasan pada jawaban Anda
Mastisa
sumber (dan penjelasan) tampaknya adalah: simurai.com/blog/2011/07/26/webkit-scrollbar .
cobberboy