scroll-snap-type
Misol
x o‘qida scroll snap funksiyasini o‘rnating.
#container {
scroll-snap-type: x mandatory;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
scroll-snap-type aylantirishni to‘xtatganingizda elementlar qanday va qaysi yo‘nalishda mahkamlanib fokusga tushishini belgilaydi.
Scroll snap xatti-harakatiga erishish uchun ota elementga scroll-snap-type xususiyati, bola elementlarga esa scroll-snap-align 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.scrollSnapType="x mandatory" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| scroll-snap-type | 69.0 | 79.0 | 99.0 | 11.0 | 56.0 |
CSS sintaksisi
scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| none | Scroll snap effekti yo‘q. Bu standart qiymat |
| x | Scroll snap effekti x o‘qiga o‘rnatiladi |
| y | Scroll snap effekti y o‘qiga o‘rnatiladi |
| block | Scroll snap effekti blok yo‘nalishiga o‘rnatiladi |
| inline | Scroll snap effekti inline yo‘nalishiga o‘rnatiladi |
| both | Scroll snap effekti ham x, ham y o‘qiga o‘rnatiladi |
| mandatory | Aylantirish amali tugagach, aylantirish avtomatik ravishda snap nuqtasiga siljiydi |
| proximity | mandatory’ga o‘xshash, lekin unchalik qat’iy emas. Aylantirish amali tugagach, aylantirish avtomatik ravishda snap nuqtasiga siljiydi, biroq snap nuqtalari orasida snap effekti bo‘lmagan soha mavjud. Brauzer parametrlariga bog‘liq. |
| 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
Ikkala yo‘nalishdagi snap xatti-harakati
scroll-snap-type xususiyati ham x, ham y o‘qiga o‘rnatilgan:
#container > div {
scroll-snap-type: both mandatory;
}
Proximity bilan snap xatti-harakati
scroll-snap-type xususiyati proximity xatti-harakati bilan ham x, ham y o‘qiga o‘rnatilgan. Bu xususiyat qiymatida, agar aylantirish amali ikki element o‘rtasida to‘xtasa, snap sodir bo‘lmaydi:
#container > div {
scroll-snap-type: both proximity;
}
Tegishli sahifalar
CSS scroll-snap-align xususiyati: CSS scroll-snap-align xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!