scroll-padding-inline-start
Misol
Inline yo‘nalishida konteyner boshidan snap pozitsiyasigacha bo‘lgan scroll padding qiymatini 20px ga o‘rnating:
div {
scroll-padding-inline-start: 20px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
scroll-padding-inline-start xususiyati inline yo‘nalishida konteyner boshidan bola elementlardagi snap pozitsiyasigacha bo‘lgan masofani belgilaydi.
Bu shuni anglatadiki, aylantirishni to‘xtatganingizda aylantirish tezda moslashadi va snap pozitsiyasi bilan konteyner orasidagi belgilangan masofada to‘xtaydi.
Inline yo‘nalishi — qatordagi mavjud belgilarning joylashuviga nisbatan keyingi belgi qo‘yiladigan yo‘nalish; CSS’da display: inline; bo‘lgan teglar, masalan <a> va <strong> teglari ham matnda shu tarzda joylashadi. Inline yo‘nalishi yozuv tiliga bog‘liq: masalan, arab tilida yangi belgilar o‘ngdan chapga joylashadi, shuning uchun inline yo‘nalishi o‘ngdan chapga bo‘ladi, ingliz tilidagi sahifalarda esa inline yo‘nalishi chapdan o‘ngga bo‘ladi. Inline yo‘nalishini CSS direction va writing-mode xususiyatlari bilan belgilash mumkin.
Snap pozitsiyasi — aylantirishni to‘xtatganingizda bola elementning konteynerdagi o‘z joyiga mahkamlanib (snap) qoladigan nuqtasi.
Eslatma: Bu xususiyat faqat scroll-snap-align xususiyati inline yo‘nalishi uchun 'start' qiymatiga o‘rnatilgan bo‘lsa ishlaydi.
scroll-padding-inline-start xususiyatining ta’sirini ko‘rish uchun bola elementlarga scroll-snap-align xususiyati, ota elementga esa scroll-padding-inline-start 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.scrollPaddingInlineStart="20px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| scroll-padding-inline-start | 69.0 | 79.0 | 68.0 | 15.0 | 56.0 |
CSS sintaksisi
scroll-padding-inline-start: auto|value|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| auto | Standart qiymat. Ichki bo‘shliqni brauzer hisoblaydi |
| length | scroll-padding-inline-start 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-inline-start xususiyatini snap xatti-harakatiga ega rasmlar galereyasida rasmlarni qo‘zg‘almas element ortidan chiqarib surish uchun ishlatish mumkin:
#container {
scroll-padding-inline-start: 30px;
}
Misol
Konteyner elementining writing-mode xususiyati qiymati 'vertical-rl' ga o‘rnatilganda, konteyner va bola elementlarning inline yo‘nalishidagi boshi yuqoridan o‘ng tomonga ko‘chadi. Bu scroll snap xatti-harakatiga va scroll-padding-inline-start xususiyatining ishlashiga ta’sir qiladi:
#container {
scroll-padding-inline-start: 20px 0;
writing-mode: vertical-rl;
}
O‘zingiz sinab ko‘ring »
Misol
Konteyner elementining direction xususiyati qiymati 'rtl' ga o‘rnatilganda, konteyner va bola elementlarning inline yo‘nalishidagi boshi o‘ng tomondan chap tomonga, oxiri esa o‘ng tomondan pastga ko‘chadi. Bu scroll snap xatti-harakatiga va scroll-padding-inline xususiyatining ishlashiga ta’sir qiladi:
#container {
scroll-padding-inline-start: 20px;
diretion: rtl;
}
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!