The overflow-anchorharta membolehkan kita untuk menarik diri daripada Tatal berlabuh, yang merupakan ciri pelayar bertujuan untuk membenarkan kandungan untuk beban di atas lokasi DOM semasa pengguna tanpa mengubah lokasi pengguna apabila kandungan yang telah dimuatkan sepenuhnya.
Mengapa Kita Memerlukannya
Scroll Anchoring adalah ciri penyemak imbas yang cuba mencegah situasi biasa di mana anda boleh menatal halaman web sebelum DOM dimuat sepenuhnya dan, apabila berlaku, setiap elemen yang memuat di atas lokasi semasa anda mendorong anda ke bawah halaman.
Masuk akal mengapa ini berlaku. Terdapat sifat CSS yang kami terapkan pada elemen yang memberi mereka ukuran (mis. width), Bentuk (mis. transform) Dan kedudukan (mis margin.). Sekiranya elemen-elemen tersebut belum dimuat pada masa kita menatal halaman, DOM akan terus memuatnya walaupun elemen tersebut berada di luar ruang pandang semasa kita dan akan berkembang secara fizikal untuk memberi ruang kepada elemen-elemen yang baru dimuatkan. Apabila DOM berkembang, kedudukan kami di halaman berubah untuk menampung elemen-elemen tersebut.
Scroll Anchoring menghalang pengalaman "melompat" dengan mengunci kedudukan pengguna di halaman semasa perubahan sedang berlaku di DOM di atas lokasi semasa. Ini membolehkan pengguna untuk terus berada di halaman mereka walaupun elemen baru dimuat ke DOM.
Properti overflow-anchorini membolehkan kita memilih untuk tidak ikut ciri Scroll Anchoring sekiranya lebih baik membiarkan kandungan dialirkan semula ketika elemen dimuat.
Sintaks
article ( overflow-anchor: (auto | none ); )Nilai
The overflow-anchorharta menerima dua nilai yang pada asasnya togol sama ada atau tidak ciri ini diaktifkan.
auto(lalai): Membolehkan penambat tatal pada bahagian halaman atau elemen yang digunakan.none: Melumpuhkan penambat tatal di sebahagian atau seluruh halaman web, atau mengecualikan bahagian DOM dari penambat, yang membolehkan kandungan untuk reflow.
Anda mungkin menerapkannya pada body, tetapi anda boleh memasukkannya ke mana-mana pemilih, dan ia akan berlaku sekiranya elemen itu bergulir.
Demo
Dalam demo ini, sebaik sahaja anda menatal di salah satu kotak, ia akan menambah sekumpulan kotak hijau ke bahagian atas div tersebut. Biasanya itu akan mendorong kandungan segera turun, berpotensi menjadi gangguan besar dan kehilangan tempat anda dalam teks. Dengan overflow-anchor: auto;, tempat tatal dipelihara. overflow-anchor: none;membolehkan div yang baru dimasukkan mempengaruhi kedudukan tatal.
Lihat penanda limpahan Pen oleh Chris Coyier (@chriscoyier) di CodePen.
Satu lagi perkara yang boleh dilakukan yang sangat berguna adalah menyematkan kedudukan tatal elemen ke bawah. Sebagai contoh, aplikasi sembang di mana mesej baru ditambahkan ke DOM di bahagian bawah, dan anda mahu kedudukan tatal tetap di bahagian bawah yang menunjukkan semua mesej baru:
Lihat pena
"Tetap di bahagian bawah" menatal dengan tatal penambat oleh Chris Coyier (@chriscoyier)
di CodePen.
Sokongan Penyemak Imbas
Pada penulisan ini, overflow-anchorbukan Standard W3C terkini, walaupun draf laporan spesifikasi yang dicadangkan tersedia untuk dibaca dan telah diadopsi oleh Chrome sejak Versi 56. Mozilla sedang mempertimbangkan fitur serupa di Firefox. Oleh kerana lebih banyak penyemak imbas menggunakan ciri Penatal Skrol, kami mungkin akan melihat lebih banyak sokongan penyemak imbas overflow-anchorkerana memberikan kawalan eksplisit untuk tidak memilih ciri tersebut.
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 56 | 66 | Tidak | 79 | Tidak |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | Tidak |
Maklumat lanjut
- Scroll Anchoring: Cadangan draf spesifikasi Scroll Anchoring yang dicadangkan
- Blog Chromium: Catatan blog yang mengumumkan penyertaan Chrome Scroll Anchoring dan harta CSS dalam Versi 56
- Tiket Bugzilla # 43114: Buka tiket untuk memasukkan harta tanah di Firefox