scroll-padding-right
Misol
Konteynerning o‘ng tomonidan snap pozitsiyasigacha bo‘lgan scroll padding qiymatini 20px ga o‘rnating:
div {
scroll-padding-right: 20px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
scroll-padding-right xususiyati konteynerning o‘ng tomonidan 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 o‘ng tomonida joylashgan bo‘lsa ishlaydi.
scroll-padding-right xususiyatining ta’sirini ko‘rish uchun bola elementlarga scroll-snap-align xususiyati, ota elementga esa scroll-padding-right 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.scrollPaddingRight="20px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| scroll-padding-right | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
CSS sintaksisi
scroll-padding-right: auto|value|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| auto | Standart qiymat. Ichki bo‘shliqni brauzer hisoblaydi |
| length | scroll-padding-right 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-right xususiyatini snap xatti-harakatiga ega rasmlar galereyasida rasmlarni qo‘zg‘almas element ortidan ko‘rinadigan joyga surish uchun ishlatish mumkin:
#container > img {
scroll-padding-left: 30px;
}
O‘ng tomonga scroll-padding o‘rnatish
Snap xatti-harakati ikkala yo‘nalishda o‘rnatilganda scroll-padding-right xususiyatini konteynerga ham o‘rnatish mumkin. Effektni ko‘rish uchun keyingi elementga gorizontal aylantiring:
#container > div {
scroll-padding-right: 30px;
}
Snap pozitsiyasi
scroll-padding-right xususiyati ishlashi uchun snap pozitsiyasi bola elementlarning o‘ng tomonida joylashgan bo‘lishi kerak. Ushbu misolda direction xususiyatining 'rtl' qiymati snap pozitsiyasini bola elementlarning o‘ng tomonidan chap tomoniga o‘zgartiradi. Kod shunday bo‘lganda scroll-padding-right xususiyati endi ishlamaydi:
#container {
direction: rtl;
scroll-padding-right: 30px;
}
#container > div {
scroll-snap-align: none end;
}
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!