Làm cách nào để làm cho thanh cuộn trên div chỉ hiển thị khi cần thiết?

151

Tôi có div này:

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

Các thanh cuộn luôn hiển thị, mặc dù văn bản không tràn. Tôi muốn làm cho các thanh cuộn chỉ hiển thị khi cần thiết - nghĩa là chỉ hiển thị khi có đủ văn bản trong hộp mà chúng cần thiết. Giống như một textarea nào. Làm thế nào để tôi làm điều này? Hoặc là lựa chọn duy nhất của tôi để tạo kiểu cho một textarea để nó trông giống như một div?

css html scrollbar

— Benubird
nguồn

Cái này thì sao. Chỉ hiển thị thanh cuộn khi di chuột qua. Không chắc chắn nếu điều này là hữu ích cho bạn. stackoverflow.com/questions/7125185/ Mạnh

— Ryan Beaulieu

codepen.io/anon/pen/QwLeMG Hy vọng điều này có thể giúp bạn

— vishalkin

overflow: auto;không hoạt động trên Android :-(

— aioobe

312

Sử dụng overflow: auto. Thanh cuộn sẽ chỉ xuất hiện khi cần thiết.

(Sidenote, bạn cũng có thể chỉ định cho thanh cuộn x hoặc y: overflow-x: autovà overflow-y: auto).

— Hidde
nguồn

5

Lưu ý rằng overflow-y chỉ hoạt động nếu bạn chỉ địnhmax-height

— Black

1

tràn-y không cần chiều cao tối đa. Tôi chưa bao giờ sử dụng max-height với overflow-y và nó hoạt động mọi lúc.

— Sumafu

1

@Sumafu bạn có thể cần nó tùy theo trường hợp, vì tôi có thể trải nghiệm ngay bây giờ.

— David

1

Bạn sẽ cần heighthoặc max-heightđặt nếu bạn đang sử dụng absolutehoặc fixedđịnh vị trên phần tử tràn vì những phần tử này ngăn phần tử thay đổi kích thước dựa trên ranh giới trang hoặc khung nhìn.

— Scott Schupbach

15

thử cái này:

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

— kleinohad
nguồn

7

thử

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

— pbaris
nguồn

6

thử

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

— GrvTyagi
nguồn

0

Tôi thấy rằng có chiều cao của div vẫn hiển thị, khi nó có văn bản hay không. Vì vậy, bạn có thể sử dụng điều này cho kết quả tốt nhất.

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

— Shailendra Kumar
nguồn

0

Bạn có thể thử với một bên dưới:

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

— Papun Sahoo
nguồn