The overflow-anchorproperti memungkinkan kita untuk memilih keluar dari Scroll Anchoring, yang merupakan fitur browser yang dimaksudkan untuk memungkinkan konten untuk load di atas lokasi DOM pengguna saat ini tanpa mengubah lokasi pengguna sekali konten yang telah dimuat sepenuhnya.
Mengapa Kami Membutuhkannya
Scroll Anchoring adalah fitur browser yang mencoba untuk mencegah situasi umum di mana Anda dapat menggulir ke bawah halaman web sebelum DOM dimuat sepenuhnya dan, ketika itu terjadi, elemen apa pun yang dimuat di atas lokasi Anda saat ini mendorong Anda lebih jauh ke bawah halaman.
Masuk akal mengapa ini terjadi. Ada properti CSS yang kita terapkan ke elemen yang memberi mereka ukuran (misalnya width), bentuk (misalnya transform) dan posisi (misalnya margin). Jika elemen tersebut belum dimuat pada saat kami menggulir ke bawah laman, DOM akan terus memuatnya meskipun berada di luar area pandang kami saat ini dan akan meluas secara fisik untuk memberi ruang bagi elemen yang baru dimuat tersebut. Seiring pertumbuhan DOM, posisi kita di halaman berubah untuk mengakomodasi elemen tersebut.
Scroll Anchoring mencegah pengalaman "melompat" dengan mengunci posisi pengguna di halaman saat perubahan sedang terjadi di DOM di atas lokasi saat ini. Ini memungkinkan pengguna untuk tetap berlabuh di tempat mereka berada pada halaman bahkan saat elemen baru dimuat ke DOM.
The overflow-anchorproperti memungkinkan kita untuk opt-out dari fitur Gulir Anchoring dalam acara yang lebih disukai untuk memungkinkan konten untuk menjadi re-aliran sebagai elemen dimuat.
Sintaksis
article ( overflow-anchor: (auto | none ); )Nilai
The overflow-anchorproperti menerima dua nilai yang pada dasarnya beralih apakah fitur ini diaktifkan.
auto(default): Mengaktifkan penahan gulir pada bagian halaman atau elemen yang diterapkan.none: Menonaktifkan gulir penahan di sebagian atau seluruh halaman web, atau mengecualikan bagian DOM dari penambatan, memungkinkan konten untuk menyesuaikan.
Anda mungkin akan menerapkan ini ke body, tetapi Anda dapat mencakupnya ke pemilih mana pun, dan ini akan berlaku jika elemen itu digulir.
Demo
Dalam demo ini, segera setelah Anda menggulir di salah satu kotak, itu akan menambahkan sekumpulan kotak hijau ke bagian atas div itu. Biasanya hal itu akan segera menurunkan konten, berpotensi menjadi gangguan besar dan kehilangan tempat Anda dalam teks. Dengan overflow-anchor: auto;, tempat gulir dipertahankan. overflow-anchor: none;memungkinkan div yang baru dimasukkan untuk mempengaruhi posisi gulir.
Lihat Pen overflow-anchor oleh Chris Coyier (@chriscoyier) di CodePen.
Hal lain yang dapat dilakukan yang dapat berguna super duper adalah menyematkan posisi gulir elemen ke bawah. Jadi misalnya, aplikasi obrolan tempat pesan baru ditambahkan ke DOM di bagian bawah, dan Anda ingin posisi gulir tetap di bawah yang menampilkan semua pesan baru:
Lihat Pena
"Tetap di bawah" bergulir dengan scroll-anchor oleh Chris Coyier (@chriscoyier)
di CodePen.
Dukungan Browser
Saat tulisan ini dibuat, overflow-anchorini bukan Standar W3C saat ini, meskipun draf laporan spesifikasi yang diusulkan tersedia untuk dibaca dan telah diadopsi oleh Chrome sejak Versi 56. Mozilla sedang mempertimbangkan fitur serupa di Firefox. Karena semakin banyak browser yang mengadopsi fitur Scroll Anchoring, kami mungkin berharap untuk melihat lebih banyak dukungan browser overflow-anchorkarena memberikan kontrol eksplisit untuk menyisih dari fitur tersebut.
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 56 | 66 | Tidak | 79 | Tidak |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Tidak |
Informasi Lebih Lanjut
- Scroll Anchoring: Usulan draf spesifikasi Scroll Anchoring
- Blog Chromium: Entri blog yang mengumumkan penyertaan Scroll Anchoring dan properti CSS di Versi 56 oleh Chrome
- Bugzilla Ticket # 43114: Buka tiket untuk memasukkan properti di Firefox