scroll-margin
Misol
Snap pozitsiyasi va konteyner orasidagi scroll margin qiymatini 20px ga o‘rnating:
div {
scroll-margin: 20px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
scroll-margin xususiyati snap pozitsiyasi va konteyner orasidagi masofani belgilaydi.
Bu shuni anglatadiki, aylantirishni to‘xtatganingizda aylantirish tezda moslashadi va snap pozitsiyasi bilan konteyner orasidagi belgilangan masofada to‘xtaydi.
Snap pozitsiyasi — aylantirishni to‘xtatganingizda bola elementning konteynerdagi o‘z joyiga mahkamlanib (snap) qoladigan nuqtasi.
Eslatma: Yuqoridagi misolda scroll margin barcha tomonlarga o‘rnatilgan, biroq aylantirish xatti-harakatini faqat yuqori tomondagi scroll margin o‘zgartiradi, chunki scroll-snap-align xususiyati "start" qiymatiga o‘rnatilgan.
scroll-margin xususiyati quyidagi xususiyatlar uchun qisqartma xususiyatdir:
scroll-margin xususiyati qiymatlarini turli usullarda o‘rnatish mumkin:
Agar scroll-margin xususiyati to‘rtta qiymatga ega bo‘lsa:
- scroll-margin: 15px 30px 60px 90px;
- yuqoridagi masofa 15px
- o‘ngdagi masofa 30px
- pastdagi masofa 60px
- chapdagi masofa 90px
Agar scroll-margin xususiyati uchta qiymatga ega bo‘lsa:
- scroll-margin: 15px 30px 60px;
- yuqoridagi masofa 15px
- chap va o‘ngdagi masofalar 30px
- pastdagi masofa 60px
Agar scroll-margin xususiyati ikkita qiymatga ega bo‘lsa:
- scroll-margin: 15px 30px;
- yuqori va pastdagi masofalar 15px
- chap va o‘ngdagi masofalar 30px
Agar scroll-margin xususiyati bitta qiymatga ega bo‘lsa:
- scroll-margin: 10px;
- to‘rttala masofa ham 10px
scroll-margin xususiyatining ta’sirini ko‘rish uchun bola elementlarga scroll-margin va scroll-snap-align xususiyatlari, ota elementga esa scroll-snap-type xususiyati o‘rnatilishi kerak.
| Standart qiymat: | 0 |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.scrollMargin="20px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| scroll-margin | 69.0 | 79.0 | 90.0 | 14.1 | 56.0 |
CSS sintaksisi
scroll-margin: 0|value|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| 0 | Scroll-margin nolga teng. Bu standart qiymat |
| length | scroll-margin qiymatini 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
Rasmlar galereyasi
scroll-margin xususiyatini snap xatti-harakatiga ega rasmlar galereyasida ishlatish mumkin. Bu yerda scroll-margin foydalanuvchiga chap tomonda rasm borligini ko‘rish imkonini beradi. Effektni ko‘rish uchun birinchi rasmdan o‘tib aylantiring:
#container > img {
scroll-margin: 0 0 0 30px;
}
Pastki va o‘ng tomonga scroll-margin o‘rnatish
scroll-margin xususiyatini elementlarning ham pastki, ham o‘ng tomoniga o‘rnatish mumkin. Effektni ko‘rish uchun keyingi elementga ham gorizontal, ham vertikal aylantiring:
#container > div {
scroll-margin: 0 10px 30px 0;
}
Tegishli sahifalar
CSS scroll-margin-bottom xususiyati: CSS scroll-margin-bottom xususiyati
CSS scroll-margin-left xususiyati: CSS scroll-margin-left xususiyati
CSS scroll-margin-right xususiyati: CSS scroll-margin-right xususiyati
CSS scroll-margin-top xususiyati: CSS scroll-margin-top xususiyati
CSS scroll-snap-align xususiyati: CSS scroll-snap-align xususiyati
CSS scroll-snap-type xususiyati: CSS scroll-snap-type xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!