The scroll-behaviorproperti di CSS memungkinkan kita untuk menentukan apakah lokasi scroll browser melompat ke lokasi baru atau lancar menjiwai transisi ketika pengguna mengklik link yang target posisi berlabuh dalam kotak bergulir.
html ( scroll-behavior: smooth; )Penjelasan Lebih Dalam
Tunggu, tunggu, apa kotak gulir yang kita bicarakan ini? Itu adalah elemen dengan konten yang melampaui batasannya.
Lihat Kotak Pengguliran Pena oleh Trik CSS (@ css-trick) di CodePen.
Perhatikan bagaimana kotak pada demo di atas memiliki ketinggian tetap 200px? Setiap konten yang melebihi tinggi itu berada di luar batas kotak dan kami telah menambahkannya overflow-y: scrollagar konten tambahan tersebut dapat diakses dengan pengguliran vertikal. Itulah yang kami maksud dengan kotak gulir.
Sekarang katakanlah kita menambahkan navigasi ke bagian atas kotak dengan setiap tautan menargetkan tiga bagian konten:
Lihat Kotak Pengguliran Pena dengan Navigasi CSS-Trik (@ css-trick) di CodePen.
Setiap tautan membawa pengguna langsung ke bagian konten yang berbeda di dalam kotak gulir. Secara default, transisi antara adalah lompatan mendadak.
Lompatan semacam itu bisa menggelegar. Di situlah scroll-behaviormasuk dan memungkinkan kami untuk mengatur transisi pengguliran yang mulus. Hal semacam ini biasanya menggunakan Javascript tetapi scroll-behaviorakan memberi kita kemampuan untuk melakukannya secara native di CSS, setelah dukungan browser meningkat.
Sintaksis
.module ( scroll-behavior: ( auto | smooth ); )Nilai
The scroll-behaviorproperti menerima dua nilai, yang pada dasarnya beralih dengan halus fitur bergulir dan mematikan.
auto(default): Nilai ini memungkinkan lompatan mendadak antara elemen dalam kotak gulir.smooth: Sesuai dengan namanya, nilai ini adalah animasi transisi yang mulus antar elemen dalam kotak gulir.
Demo
Demo berikut hanya akan berfungsi di Chrome 61+, Firefox 36+, dan Opera 48+ pada saat penulisan ini.
Lihat Kotak Pengguliran Pena dengan `perilaku-gulir` oleh CSS-Trik (@ css-trick) di CodePen.
Dukungan Browser
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 |
|---|---|---|---|---|
| 61 | 36 | Tidak | 79 | Tidak |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Tidak |
Informasi Lebih Lanjut
- CSSOM View Module: Spesifikasi draf, termasuk properti CSS. Draf saat ini menyertakan rekomendasi untuk memindahkan
scroll-behaviorke spesifikasi lain, jadi akan menarik untuk melihat di mana itu mendarat. - Mozilla Developer Network: Referensi MDN untuk spesifikasi
- Status Platform Microsoft Edge: Saat ini menampilkan status fitur ini sebagai Dalam Pertimbangan
- Status Platform Chrome: Saat ini menampilkan status fitur ini sebagai Dalam Pengembangan dan menyertakan status untuk platform lain sebagai tambahan
- Smooth Scrolling Snippet: Snippet untuk mengaktifkan scrolling mulus dengan Javascript dan jQuery
- Pengguliran Halus dan Aksesibilitas: Posting Trik CSS tentang dampak pengguliran lancar yang mendukung Javascript