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

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