The scroll-behaviorharta di CSS membolehkan kita untuk menentukan sama ada lokasi tatal pelayar melompat ke lokasi baru atau lancar menghidupkan peralihan apabila pengguna mengklik link yang sasaran kedudukan yang berlabuh dalam kotak menatal.
html ( scroll-behavior: smooth; )Penjelasan Lebih Dalam
Tunggu, tunggu, apa kotak tatal ini yang kita bicarakan? Ini adalah elemen dengan kandungan yang melampaui batas.
Lihat Pen Skrolling Box oleh CSS-Tricks (@ css-tricks) di CodePen.
Perhatikan bagaimana kotak dalam demo di atas mempunyai ketinggian tetap 200px? Sebarang kandungan yang melebihi ketinggian itu berada di luar batas kotak dan kami tambahkan overflow-y: scrolluntuk menjadikan kandungan tambahan itu dapat diakses dengan tatal menegak. Itulah yang kami maksudkan dengan kotak tatal.
Sekarang katakan kita menambah navigasi ke bahagian atas kotak dengan setiap pautan menyasarkan tiga bahagian kandungan:
Lihat Pen Scrolling Box w / Nav by CSS-Tricks (@ css-tricks) di CodePen.
Setiap pautan membawa pengguna terus ke bahagian kandungan yang berlainan di dalam kotak tatal. Secara lalai, peralihan antara adalah lonjakan mendadak.
Lompatan semacam itu boleh menggelecek. Dari situlah scroll-behaviormasuk dan membolehkan kita mengatur peralihan tatal yang lancar. Perkara seperti ini digunakan untuk mengambil Javascript mewah tetapi scroll-behaviorakan memberi kita kemampuan untuk melakukannya secara asli dalam CSS, setelah sokongan penyemak imbas bertambah baik.
Sintaks
.module ( scroll-behavior: ( auto | smooth ); )Nilai
The scroll-behaviorharta menerima dua nilai, yang pada dasarnya togol licin menatal ciri dan mematikan.
auto(lalai): Nilai ini membolehkan lompatan tiba-tiba antara elemen dalam kotak tatal.smooth: Sesuai dengan namanya, nilai ini adalah peralihan animasi yang lancar antara elemen dalam kotak tatal.
Demo
Demo berikut hanya akan berfungsi pada Chrome 61+, Firefox 36+, dan Opera 48+ pada masa penulisan ini.
Lihat Pen Scrolling Box w / `scroll-behavior` oleh CSS-Tricks (@ css-tricks) di CodePen.
Sokongan Penyemak Imbas
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 |
|---|---|---|---|---|
| 61 | 36 | Tidak | 79 | Tidak |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | Tidak |
Maklumat lanjut
- Modul Paparan CSSOM: Spesifikasi draf, termasuk harta CSS. Draf semasa termasuk cadangan untuk memindahkan
scroll-behaviorke spesifikasi lain, jadi akan menarik untuk melihat di mana ia mendarat. - Rangkaian Pembangun Mozilla: Rujukan MDN untuk spesifikasi
- Status Microsoft Edge Platform: Saat ini menampilkan status ciri ini sebagai Di bawah Pertimbangan
- Status Platform Chrome: Pada masa ini menunjukkan status ciri ini sebagai Dalam Pembangunan dan menyertakan status untuk platform lain sebagai tambahan
- Snippet Scrolling Lancar: Coretan untuk membolehkan tatal lancar dengan Javascript dan jQuery
- Scrolling dan Aksesibilitas yang lancar: Posting CSS-Tricks mengenai kesan tatal lancar yang diaktifkan oleh Javascript