scroll-padding

Misol

Konteynerdan snap pozitsiyasigacha bo‘lgan scroll padding qiymatini 20px ga o‘rnating:

div { scroll-padding: 20px; }

Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.

Ta’rif va qo‘llanilishi

scroll-padding xususiyati konteynerdan bola elementlarning snap pozitsiyasigacha bo‘lgan masofani belgilaydi.

Bu shuni anglatadiki, aylantirishni to‘xtatganingizda aylantirish tezda moslashadi va konteynerdan fokusdagi bola elementning snap pozitsiyasigacha bo‘lgan belgilangan masofada to‘xtaydi.

Snap pozitsiyasi — aylantirishni to‘xtatganingizda bola elementning konteynerdagi o‘z joyiga mahkamlanib (snap) qoladigan nuqtasi.

Eslatma: Yuqoridagi misolda scroll padding barcha tomonlarga o‘rnatilgan, biroq aylantirish xatti-harakatini faqat yuqori tomondagi scroll padding o‘zgartiradi, chunki scroll-snap-align "start" qiymatiga o‘rnatilgan.

scroll-padding xususiyati quyidagi xususiyatlar uchun qisqartma xususiyatdir:

scroll-padding xususiyati qiymatlarini turli usullarda o‘rnatish mumkin:

Agar scroll-padding xususiyati to‘rtta qiymatga ega bo‘lsa:

scroll-padding: 15px 30px 60px 90px;
- yuqoridagi masofa 15px
- o‘ngdagi masofa 30px
- pastdagi masofa 60px
- chapdagi masofa 90px

Agar scroll-padding xususiyati uchta qiymatga ega bo‘lsa:

scroll-padding: 15px 30px 60px;
- yuqoridagi masofa 15px
- chap va o‘ngdagi masofalar 30px
- pastdagi masofa 60px

Agar scroll-padding xususiyati ikkita qiymatga ega bo‘lsa:

scroll-padding: 15px 30px;
- yuqori va pastdagi masofalar 15px
- chap va o‘ngdagi masofalar 30px

Agar scroll-padding xususiyati bitta qiymatga ega bo‘lsa:

scroll-padding: 10px;
- to‘rttala masofa ham 10px

scroll-padding xususiyatining ta’sirini ko‘rish uchun bola elementlarga scroll-snap-align xususiyati, ota elementga esa scroll-padding 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.scrollPadding="20px" Sinab ko‘ring

Brauzerlarda qo‘llab-quvvatlash

Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.

Xususiyat
scroll-padding	69.0	79.0	68.0	14.1	56.0

CSS sintaksisi

scroll-padding: auto|value|initial|inherit;

Xususiyat qiymatlari

Qiymat	Tavsif
auto	Standart qiymat. Ichki bo‘shliqni brauzer hisoblaydi
length	scroll-padding 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 xususiyatini snap xatti-harakatiga ega rasmlar galereyasida rasmlarni qo‘zg‘almas element ostiga surish uchun ishlatish mumkin:

#container { scroll-padding: 30px 0 0 0; }

Qo‘zg‘almas yuqori element

O‘zingiz sinab ko‘ring »

Pastki va o‘ng tomonga scroll-padding o‘rnatish

scroll-padding xususiyatini konteynerning ham pastki, ham o‘ng tomoniga o‘rnatish mumkin. Effektni ko‘rish uchun keyingi elementga ham gorizontal, ham vertikal aylantiring: