Perbedaan antara HTML "overflow: auto" dan "overflow: scroll"

123

Saat saya mempelajari nilai overflowproperti, saya menemukan dua nilai ini: autodan scroll, yang menambahkan scrollbar jika konten melebihi elemen.

Bisakah seseorang menjelaskan kepada saya apa perbedaan di antara mereka?

html css

— GirishK
sumber

185

Otomatis hanya akan menampilkan bilah gulir jika ada konten yang dipotong.

Namun, scroll akan selalu menampilkan scrollbar meskipun semua konten cocok dan Anda tidak dapat menggulirnya.

— Johan Davidsson
sumber

2

Sepertinya tidak ada perbedaan, setidaknya pada versi terbaru Safari: Bahkan dengan scroll, saya tidak melihat scrollbar jika kontennya sesuai. Tapi, untuk amannya, saya menggunakan autokarena saya hanya ingin menampilkan scrollbar saat konten dipotong.

— ma11hew28

1

@MattDiPasquale OS X dan Windows menampilkan scrollbar dengan cara berbeda. Anda mungkin menggunakan Safari di Mac, bukan? OS X sering menyembunyikan bilah gulir sampai Anda benar-benar menggulir.

— Johan Davidsson

1

Tampaknya ada lebih banyak perbedaan dari itu, overlow: scrollmembuat kotak lebih tipis: jsbin.com/letog/2/edit

— Dmitri Zaitsev

Di Safari 12 (mungkin juga versi yang lebih lama), kecuali bilah gulir dikonfigurasi untuk selalu ditampilkan, overflow: scrolldan overflow: autosecara fungsional identik saat penampung cukup besar untuk memuat konten.

— Luke Senilai

15

overflow: scrollakan menyembunyikan semua konten yang meluap dan menyebabkan bilah gulir muncul di elemen yang dimaksud. Jika konten tidak meluap, scrollbar akan tetap terlihat, tetapi dinonaktifkan.

overflow: auto sangat mirip, tetapi scrollbar hanya muncul saat konten meluap.

Ada penjelasan serupa di sini , dengan beberapa tangkapan layar untuk mengilustrasikan maksudnya.

— James Allardice
sumber

2

Lihatlah Trik CSS .

Otomatis akan menampilkan bilah gulir jika dan hanya jika konten meluap; tapi scroll akan selalu menampilkan scrollbar, apakah kontennya meluap atau tidak.

— samir chauhan
sumber

1

Menambahkan poin ke jawaban, Overflow:autotidak berfungsi di IE7 ketika posisi wadahnya absolut. Posisi relative overflow IE7 . Tapi pengaturan Overflow:scrollberhasil

— Kira
sumber

0

overflow: scroll akan menampilkan scrollbar horizontal dan vertikal meskipun Anda tidak membutuhkannya. while, overflow: auto akan menampilkan scrollbar yang dibutuhkan div Anda. jadi pada dasarnya otomatis akan membantu Anda menyingkirkan kedua scollbar. Ini lebih dari itu:

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

— manish joshi
sumber