scroll-margin-inline
Misol
Inline yo‘nalishida snap pozitsiyasidan aylantiriladigan konteynergacha bo‘lgan masofani o‘rnating:
div {
scroll-margin-inline: 20px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
scroll-margin-inline xususiyati inline yo‘nalishida snap pozitsiyasi va konteyner orasidagi masofani belgilaydi.
Bu shuni anglatadiki, aylantirishni to‘xtatganingizda aylantirish tezda moslashadi va inline yo‘nalishida 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.
scroll-margin-inline xususiyati quyidagi xususiyatlar uchun qisqartma xususiyatdir:
scroll-margin-inline xususiyati qiymatlarini turli usullarda o‘rnatish mumkin:
Agar scroll-margin-inline xususiyati ikkita qiymatga ega bo‘lsa:
- scroll-margin-inline: 20px 70px;
- boshidagi masofa 20px
- oxiridagi masofa 70px
Agar scroll-margin-inline xususiyati bitta qiymatga ega bo‘lsa:
- scroll-margin-inline: 20px;
- boshidagi va oxiridagi masofa 20px
scroll-margin-inline xususiyatining ta’sirini ko‘rish uchun bola elementlarga scroll-margin-inline va scroll-snap-align xususiyatlari, ota elementga esa scroll-snap-type xususiyati o‘rnatilishi kerak.
CSS scroll-margin-inline va scroll-margin-block xususiyatlari CSS scroll-margin-top, scroll-margin-bottom, scroll-margin-left va scroll-margin-right xususiyatlariga juda o‘xshaydi, ammo scroll-margin-block va scroll-margin-inline xususiyatlari blok va inline yo‘nalishlariga bog‘liq.
| Standart qiymat: | 0 |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.scrollMarginInline="20px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| scroll-margin-inline | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
CSS sintaksisi
scroll-margin-inline: 0|value|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| 0 | Standart. Elementning standart scroll-margin-inline masofasi. |
| length | Masofani 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
Misol
<div> elementining writing-mode xususiyati qiymati vertical-rl ga o‘rnatilganda, inline yo‘nalishi yuqoridan pastga bo‘ladi. Natijada elementning boshi chap tomondan yuqoriga, oxiri esa o‘ng tomondan pastga ko‘chadi. Bu scroll-margin-inline xususiyatiga ham ta’sir qiladi:
div {
scroll-margin-inline: 20px 0;
writing-mode: vertical-rl;
}
O‘zingiz sinab ko‘ring »
Misol
<div> elementining direction xususiyati qiymati rtl ga o‘rnatilganda, inline yo‘nalishi o‘ngdan chapga bo‘ladi. Natijada elementning boshi chap tomondan o‘ng tomonga, oxiri esa o‘ng tomondan chap tomonga ko‘chadi. Bu scroll-margin-inline xususiyatiga ham ta’sir qiladi:
div {
scroll-margin-inline: 0 20px;
direction: rtl;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS direction xususiyati: CSS Direction xususiyati
CSS scroll-margin-inline-end xususiyati: CSS scroll-margin-inline-end xususiyati
CSS scroll-margin-inline-start xususiyati: CSS scroll-margin-inline-start 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!