scroll-snap-align
Misol
Foydalanuvchi aylantirishni to‘xtatganda eng yaqin element markazga mahkamlanib (snap) qolsin:
div {
scroll-snap-align: center;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
scroll-snap-align xususiyati aylantirishni to‘xtatganingizda elementlar qayerda mahkamlanib (snap) fokusga tushishini belgilaydi.
Scroll snap xatti-harakatiga erishish uchun bola elementlarga scroll-snap-align xususiyati, ota elementga esa scroll-snap-type xususiyati o‘rnatilishi kerak.
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.scrollSnapAlign="start" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| scroll-snap-align | 69.0 | 79.0 | 68.0 | 11.0 | 56.0 |
CSS sintaksisi
scroll-snap-align: none|start|end|center|block inline|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| none | Scroll snap effekti yo‘q. Bu standart qiymat |
| start | x va y o‘qlarida elementlarning boshida scroll snap sodir bo‘ladi. |
| end | x va y o‘qlarida elementlarning oxirida scroll snap sodir bo‘ladi. |
| center | x va y o‘qlarida elementlarning markazida scroll snap sodir bo‘ladi. |
| block inline | Ikki qiymatli sintaksis. Birinchi qiymat blok yo‘nalishida, ikkinchi qiymat esa inline yo‘nalishida qanday snap qilishni belgilaydi. |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Rasmlar galereyasi
scroll-snap-align xususiyati rasmlar galereyasini aylantirish uchun juda qulay. Bu yerda aylantirish yo‘nalishi gorizontal, snap tekislanishi esa markazda. Foydalanuvchi aylantirish panelini qo‘yib yuborganda eng yaqin rasm aylantiriladigan sohaning o‘rtasiga mahkamlanib qoladi. Rasmni bosib ko‘ring, so‘ngra ularni aylantirish uchun o‘ng yoki chap strelka tugmalaridan foydalaning:
#container > img {
scroll-snap-align: none center;
}
Snap’ni elementlar boshiga vertikal tekislash
Vertikal aylantirishda scroll-snap-align xususiyatini blok yo‘nalishida elementlar boshiga ham o‘rnatish mumkin:
#container > div {
scroll-snap-align: start none;
}
Tegishli sahifalar
CSS scroll-snap-type xususiyati: CSS scroll-snap-type xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!