Sự khác biệt giữa HTML "tràn: tự động" và "tràn: cuộn"

123

Khi tôi đang nghiên cứu các overflowgiá trị của thuộc tính, tôi đã bắt gặp hai giá trị này: autovà scroll, thêm (các) thanh cuộn nếu nội dung tràn phần tử.

Ai đó có thể vui lòng giải thích cho tôi sự khác biệt giữa chúng là gì?

html css

— GirishK
nguồn

185

Tự động sẽ chỉ hiển thị thanh cuộn khi bất kỳ nội dung nào được cắt bớt.

Tuy nhiên, Scroll sẽ luôn hiển thị thanh cuộn ngay cả khi tất cả nội dung đều phù hợp và bạn không thể cuộn nó.

— Johan Davidsson
nguồn

2

Dường như không có sự khác biệt, ít nhất là trên phiên bản Safari mới nhất: Ngay cả khi scroll, tôi không thấy thanh cuộn nếu nội dung phù hợp. Nhưng, để an toàn, tôi đã chọn autovì tôi chỉ muốn hiển thị thanh cuộn khi nội dung được cắt bớt.

— ma11hew28

1

@MattDiPasquale OS X và Windows hiển thị thanh cuộn theo những cách khác nhau. Chắc hẳn bạn đang sử dụng Safari trên Mac phải không? OS X thường ẩn thanh cuộn cho đến khi bạn thực sự cuộn.

— Johan Davidsson

1

Dường như có sự khác biệt hơn thế nữa, overlow: scrolllàm cho mỏng hơn hộp: jsbin.com/letog/2/edit

— Dmitri Zaitsev

Trong Safari 12 (có thể là các phiên bản cũ hơn), trừ khi các thanh cuộn được định cấu hình để luôn hiển thị overflow: scrollvà overflow: autogiống hệt nhau về chức năng khi vùng chứa đủ lớn để chứa nội dung.

— Luke Worth

15

overflow: scrollsẽ ẩn tất cả nội dung tràn và làm cho các thanh cuộn xuất hiện trên phần tử được đề cập. Nếu nội dung không tràn, các thanh cuộn sẽ vẫn hiển thị nhưng bị vô hiệu hóa.

overflow: auto tương tự như vậy, nhưng thanh cuộn chỉ xuất hiện khi nội dung bị tràn.

Có một lời giải thích tương tự về điều này ở đây , với một số ảnh chụp màn hình để minh họa quan điểm.

— James Allardice
nguồn

2

Hãy xem các Thủ thuật CSS .

Tự động sẽ hiển thị thanh cuộn nếu và chỉ khi nội dung tràn; nhưng scroll sẽ luôn hiển thị thanh cuộn, cho dù nội dung có tràn hay không.

— samir chauhan
nguồn

1

Thêm một điểm vào câu trả lời, Overflow:autokhông hoạt động trong IE7 khi vị trí của vùng chứa là tuyệt đối Vị trí tương đối tràn IE7 . Nhưng thiết lập Overflow:scrollhoạt động

— Kira
nguồn

0

tràn: cuộn sẽ hiển thị cả thanh cuộn ngang và dọc ngay cả khi bạn không cần thanh cuộn này hoặc thanh khác. trong khi, tràn: auto sẽ hiển thị thanh cuộn mà div của bạn cần. vì vậy về cơ bản tự động sẽ giúp bạn thoát khỏi cả hai thanh Scollbar. Đây là nhiều hơn thế:

https://css-tricks.com/the-css-overflow-property/

— manish joshi
nguồn