scroll-padding-top
Misol
Konteyner tepasidan snap pozitsiyasigacha bo‘lgan scroll padding qiymatini 20px ga o‘rnating:
div {
scroll-padding-top: 20px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
scroll-padding-top xususiyati konteyner tepasidan bola elementlardagi snap pozitsiyasigacha bo‘lgan 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-padding-top xususiyatining ta’sirini ko‘rish uchun bola elementlarga scroll-snap-align xususiyati, ota elementga esa scroll-padding-top va scroll-snap-type xususiyatlari o‘rnatilishi kerak.
| Standart qiymat: | auto |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.scrollPaddingTop="20px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| scroll-padding-top | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
CSS sintaksisi
scroll-padding-top: auto|value|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| auto | Standart qiymat. Ichki bo‘shliqni brauzer hisoblaydi |
| length | scroll-padding-top qiymatini px, pt, cm va hokazolarda belgilaydi. Manfiy qiymatlarga ruxsat berilmaydi. Uzunlik birliklari haqida o‘qing |
| % | Ichki bo‘shliqni o‘z ichiga olgan element kengligining foizida 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-padding-top xususiyatini snap xatti-harakatiga ega rasmlar galereyasida rasmlarni qo‘zg‘almas element ostiga surish uchun ishlatish mumkin:
#container {
scroll-padding-top: 30px;
}
Yuqori tomonga scroll-padding o‘rnatish
Snap xatti-harakati ikkala yo‘nalishda o‘rnatilganda scroll-padding-top xususiyatini konteynerga ham o‘rnatish mumkin. Effektni ko‘rish uchun keyingi elementga vertikal aylantiring:
#container {
scroll-padding-top: 30px;
}
Snap pozitsiyasi
scroll-padding-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-padding-top xususiyati endi ishlamaydi:
#container {
writing-mode: vertical-rl;
scroll-padding-top: 30px;
}
#container > div {
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!