scroll-margin-top
Misol
Snap pozitsiyasi va konteyner orasidagi yuqori scroll margin qiymatini 20px ga o‘rnating:
div {
scroll-margin-top: 20px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
scroll-margin-top xususiyati snap pozitsiyasi va konteyner orasidagi masofani belgilaydi.
Snap pozitsiyasi — aylantirishni to‘xtatganingizda bola elementning konteynerdagi o‘z joyiga mahkamlanib (snap) qoladigan nuqtasi. Snap pozitsiyasi scroll-snap-align xususiyati bilan o‘rnatiladi, lekin unga CSS’ning direction va writing-mode xususiyatlari ham ta’sir qilishi mumkin.
Eslatma: Bu xususiyat faqat snap pozitsiyasi bola elementning yuqori qismida joylashgan bo‘lsa ishlaydi.
scroll-margin-top xususiyatining ta’sirini ko‘rish uchun bola elementlarga scroll-margin-top va scroll-snap-align xususiyatlari, ota elementga esa scroll-snap-type xususiyati o‘rnatilishi kerak.
| Standart qiymat: | 0 |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.scrollMarginTop="20px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| scroll-margin-top | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
CSS sintaksisi
scroll-margin-top: 0|value|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| 0 | Scroll-margin-top nolga teng. Bu standart qiymat |
| length | scroll-margin-top qiymatini px, pt, cm va hokazolarda belgilaydi. Manfiy qiymatlarga ruxsat beriladi. Uzunlik birliklari haqida o‘qing |
| 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-margin-top xususiyatini snap xatti-harakatiga ega rasmlar galereyasida ishlatish mumkin. Bu yerda scroll-margin-top foydalanuvchiga tepada rasm borligini ko‘rish imkonini beradi. Effektni ko‘rish uchun birinchi rasmdan o‘tib aylantiring:
#container > img {
scroll-margin-top: 30px;
}
Snap pozitsiyasi
scroll-margin-top xususiyati ishlashi uchun snap pozitsiyasi bola elementlarning yuqori qismida joylashgan bo‘lishi kerak. Ushbu misolda writing-mode xususiyati snap pozitsiyasini bola elementlarning yuqori qismidan o‘ng tomoniga o‘zgartiradi. Kod shunday bo‘lganda scroll-margin-top xususiyati endi ishlamaydi:
#container {
writing-mode: vertical-rl;
}
#container > div {
scroll-margin-top: 30px;
scroll-snap-align: start none;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS direction xususiyati: CSS Direction xususiyati
CSS scroll-snap-align xususiyati: CSS scroll-snap-align xususiyati
CSS scroll-snap-type xususiyati: CSS scroll-snap-type xususiyati
CSS writing-mode xususiyati: CSS Writing-mode xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!