CSS scroll-padding کئیتی
- پچھلے کاغذ scroll-margin-top
- بعد کاغذ scroll-padding-block
定义和用法
scroll-padding 属性指定从容器到子元素吸附位置的距离。
这意味着，当你停止滚动时，滚动会快速调整并停止在距离容器到焦点子元素吸附位置的指定距离处。
吸附位置是指子元素在停止滚动时，其在容器中固定到位的位置。
scroll-padding یہ اپریشن درج ذیل اپریشنوں کا مختصر نام ہے:
scroll-padding اپریشن کی اقدار مختلف طریقوں سے سیٹ کی جاسکتی ہیں:
اگر scroll-padding اپریشن کو چار اعداد دیئے گئے ہیں:
scroll-padding: 15px 30px 60px 90px;
- باریکائی کی اوپر کی باریکائی 15 پی ایکس کی ہوتی ہے
- دexter کی باریکائی 30 پی ایکس کی ہوتی ہے
- پائین کی باریکائی 60 پی ایکس کی ہوتی ہے
- بائیں کی باریکائی 90 پی ایکس کی ہوتی ہے
اگر scroll-padding اپریشن کو تین اعداد دیئے گئے ہیں:
scroll-padding: 15px 30px 60px;
- باریکائی کی اوپر کی باریکائی 15 پی ایکس کی ہوتی ہے
- بائیں اور دائیں کی دوری 30px ہیں
- پائین کی باریکائی 60 پی ایکس کی ہوتی ہے
اگر scroll-padding اپریشن کو دو اعداد دیئے گئے ہیں:
scroll-padding: 15px 30px;
- باریکائی اور پائین کا فاصلہ 15 پی ایکس کا ہوتا ہے
- بائیں اور دائیں کی دوری 30px ہیں
اگر scroll-padding ویژگی کو کسی ایک مقصد کا حمایتی دیا گیا ہے:
scroll-padding: 10px;
- تمام چار جانب کی دوری 10px ہیں
دیدار کریئے: scroll-padding ویژگی کا مقصد، اثر دیکھنے کے لئے بچے عنصر پر scroll-snap-align ویژگی، اور والد عنصر پر scroll-padding و scroll-snap-type ویژگی.
توجہ:درج ذیل مثال میں، تمام جانب کی اسکرول کی اندرونی مارگ قائم کی گئی ہیں، لیکن scroll-snap-align بعد کی جانب کی اسکرول کی اندرونی مارگ کو "بعد" کے طور پر قائم کریئے، اس لئے صرف بعد کی جانب کی اسکرول کا کارروائی بدل دیا جاتا ہے。
مثال
مثال 1
کونٹینر سے آپریشن کی جانب کی اسکرول کی اندرونی مارگ 20px قائم کریئے:
div {
scroll-padding: 20px;
}
مثال 2: تصویر گیلری
scroll-padding ویژگی کا مقصد کسی کسی سائٹ کی آپریشن میں استعمال کی جاسکتا ہے، تاکہ تصاویر کو پائیدار عنصر کے نیچلے میں بھیج سکتا ہے:
#container {
scroll-padding: 30px 0 0 0;
}
مثال 3: نیچلی اور دائیں کی جانب کی اسکرول کی اندرونی مارگ قائم کریئے
scroll-padding ویژگی کا مقصد کانٹینر کی نیچلی اور دائیں کی جانب میں ایک ساتھ قائم کیا جاسکتا ہے، افقی اور عمودی اسکرول کریئے تاکہ اثر دیکھیئے:
#container {
scroll-padding: 0 10px 30px 0;
}
CSS زبان
scroll-padding: auto|value|initial|inherit;
ویژگی کا مقصد
| مقصد | وصف |
|---|---|
| auto | مقصد کا حمایتی |
| length |
px، pt، cm وغیرہ جیسے اکائیوں کا استعمال سے اس کی اسکرول کی اندرونی کا مارگ کا اندازہ لگایا جاتا ہے。 منفی کا استعمال نہیں کیا جاسکتا، ملاحظت دیکھیئے:واحدهای CSS. |
| % | مقصد کا حمایتی کا فیصد کا نصف کا اندازہ لگایا جاتا ہے جو شامل کانٹینر کی عرض میں ہوتا ہے。 |
| initial | اس کا حمایتی مقصد کو مقصد پر نکال کریں، ملاحظت دیکھیئے: initial. |
| وارث | اس کی جگہ سے والد عنصر سے اس کا حمایتی حاصل کریں، ملاحظت دیکھیئے: وارث. |
تکنیکی تفصیلات
| مقصد: | auto |
|---|---|
| وارثیت: | نہیں |
| آنیماشن کی تیاری: | ناممکن ہے، ملاحظت دیکھیئے:آنیماشن سے متعلق اترتیجی. |
| نسخہ: | CSS3 |
| جاوا اسکریپت زبان: | object.style.scrollPadding="20px" |
براوزر کی پشتیبانی
جداول میں دیکھی گئی اعداد، پہلے پورا طور پر اس کا حمایتی براوزر کی نسخہ کی نمائش کرتی ہیں。
| کروم | ایجی | فائرفاکس | سافری | آپرا |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
صفحات مرتبط
ملاحظات:CSS scroll-padding-bottom کئیتی
ملاحظات:CSS scroll-padding-left کئیتی
ملاحظات:CSS scroll-padding-right کئیتی
ملاحظات:CSS scroll-padding-top کئیتی
ملاحظات:CSS scroll-snap-align کئیتی
ملاحظات:CSS scroll-snap-type کئیتی
- پچھلے کاغذ scroll-margin-top
- بعد کاغذ scroll-padding-block
