Bagaimana cara membuat bilah gulir pada div hanya terlihat bila perlu?

151

Saya memiliki div ini:

<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>

Bilah gulir selalu terlihat, meskipun teks tidak meluap. Saya ingin membuat scrollbar hanya terlihat ketika diperlukan - yaitu, hanya terlihat ketika ada cukup teks di dalam kotak yang diperlukan. Seperti halnya textarea. Bagaimana saya melakukan ini? Atau satu-satunya pilihan saya untuk mendesain textarea sehingga terlihat seperti div?

css html scrollbar Benubird
sumber
Bagaimana dengan ini. Hanya menampilkan bilah gulir saat melayang. Tidak yakin apakah ini bermanfaat bagi Anda. stackoverflow.com/questions/7125185/…
Ryan Beaulieu
codepen.io/anon/pen/QwLeMG Semoga ini bisa membantu Anda
vishalkin
overflow: auto;tidak berfungsi di Android :-(
aioobe

Jawaban:

312

Gunakan overflow: auto. Bilah gulir hanya akan muncul bila diperlukan.

(Sidenote, Anda juga dapat menentukan hanya bilah gulir x, atau y: overflow-x: autodan overflow-y: auto).

Hidde
sumber
5
Perhatikan bahwa overflow-y hanya berfungsi jika Anda menentukanmax-height
Hitam
1
overflow-y tidak perlu max-height. Saya tidak pernah menggunakan max-height dengan overflow-y dan ini berhasil setiap saat.
Sumafu
1
@Sumafu Anda mungkin membutuhkannya tergantung pada kasingnya, karena saya bisa mengalaminya sekarang.
David
1
Anda perlu heightatau max-heightmengatur jika Anda menggunakan absoluteatau fixedmemposisikan pada elemen overflow karena ini mencegah elemen dari mengubah ukuran berdasarkan halaman atau batas viewport.
Scott Schupbach
15

coba ini:

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
kleinohad
sumber
7

mencoba

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
pbaris
sumber
6

mencoba 

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
GrvTyagi
sumber
0

Saya menemukan bahwa ada ketinggian div masih menunjukkan, ketika ada teks atau tidak. Jadi Anda bisa menggunakan ini untuk hasil terbaik.

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>
Shailendra Kumar
sumber
0

Anda dapat mencoba dengan yang di bawah ini:

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>
Papun Sahoo
sumber