scroll-margin-block
Misol
Blok yo‘nalishida snap pozitsiyasidan aylantiriladigan konteynergacha bo‘lgan masofani o‘rnating:
div {
scroll-margin-block: 10px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
scroll-margin-block xususiyati blok yo‘nalishida snap pozitsiyasi va konteyner orasidagi masofani belgilaydi.
Bu shuni anglatadiki, aylantirishni to‘xtatganingizda aylantirish tezda moslashadi va blok yo‘nalishida snap pozitsiyasi bilan konteyner orasidagi belgilangan masofada to‘xtaydi.
Blok yo‘nalishi — mavjud qatorning joylashuviga nisbatan keyingi qator qo‘yiladigan yo‘nalish; CSS’da display: block; bo‘lgan teglar, masalan <p> va <div> teglari ham sahifada shu tarzda joylashadi. Blok yo‘nalishi yozuv tiliga bog‘liq: masalan, mo‘g‘ul tilida yangi qatorlar chapdan o‘ngga joylashadi, shuning uchun blok yo‘nalishi chapdan o‘ngga bo‘ladi, ingliz tilidagi sahifalarda esa blok yo‘nalishi yuqoridan pastga qarab boradi. Blok yo‘nalishini CSS writing-mode xususiyati 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 blok yo‘nalishi uchun 'start' yoki 'end' qiymatiga o‘rnatilgan bo‘lsa ishlaydi.
scroll-margin-block xususiyati quyidagi xususiyatlar uchun qisqartma xususiyatdir:
scroll-margin-block xususiyati qiymatlarini turli usullarda o‘rnatish mumkin:
Agar scroll-margin-block xususiyati ikkita qiymatga ega bo‘lsa:
- scroll-margin-block: 10px 50px;
- boshidagi masofa 10px
- oxiridagi masofa 50px
Agar scroll-margin-block xususiyati bitta qiymatga ega bo‘lsa:
- scroll-margin-block: 10px;
- boshidagi va oxiridagi masofa 10px
scroll-margin-block xususiyatining ta’sirini ko‘rish uchun bola elementlarga scroll-margin-block 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.scrollMarginBlock="20px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| scroll-margin-block | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
CSS sintaksisi
scroll-margin-block: 0|value|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| 0 | Standart. Elementning standart scroll-margin-block qiymati. |
| 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
Bola elementning writing-mode xususiyati qiymati vertical-rl ga o‘rnatilganda, elementning blok yo‘nalishidagi boshi yuqoridan o‘ng tomonga, oxiri esa pastdan chap tomonga ko‘chadi. Bu scroll snap xatti-harakatiga va scroll-margin-block xususiyatining ishlashiga ta’sir qiladi:
div {
scroll-margin-block: 20px 0;
writing-mode: vertical-rl;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS scroll-margin-block-end xususiyati: CSS scroll-margin-block-end xususiyati
CSS scroll-margin-block-start xususiyati: CSS scroll-margin-block-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!