Properti scroll-behavior CSS

Definisi dan penggunaan

Properti scroll-behavior menentukan apakah lokasi di halaman akan bergerak secara lancar (dengan efek animasi) saat pengguna mengklik tautan di dalam kotak yang dapat digerakkan, bukannya melompat secara lurus.

Contoh

Menambah efek gerakan yang lancar untuk dokumen:

html {
  scroll-behavior: smooth;
}

Coba sendiri

Syntaks CSS

scroll-behavior: auto|smooth|initial|inherit;

Nilai properti

Nilai Deskripsi
auto Nilai standar. Memungkinkan adanya pergerakan yang langsung antara elemen di dalam kotak gerakan.
lancar Memungkinkan adanya efek gerakan yang lancar antara elemen di dalam kotak gerakan.
initial Atur properti ini ke nilai standarnya. Lihat initial.
inherit Mengambil properti ini dari elemen orang tua. Lihat inherit.

Detil teknis

Nilai standar: auto
Turunan: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Properti yang berhubungan dengan animasi.
Versi: Modul Lihat CSSOM (draf kerja)
Syntaks JavaScript: object.style.scrollBehavior="smooth"

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung properti ini penuh.

Chrome IE / Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0