CSS scroll-padding-block-end ਪ੍ਰਤੀਯੋਗਿਤਾ

تعلیم اور استعمال

scroll-padding-block-end پرزوائز بلاک ڈائریکشن پر، کانٹینر کے خاتمے سے بچے عنصر کی جذب کی جائیں گا کی سمت کی فاصلہ کا حوالہ دیتا ہے۔

یعنی، جب آپ اسکرول سے دستبردار ہوجائیں تو اسکرول تیزی سے جائز کیا جائیگا، اور بلاک ڈائریکشن پر، جذب کی جائیں گا کی سمت اور کانٹینر کے درمیان مخصوص فاصلے پر رکھا جائیگا۔

بلاک ڈائریکشن موجود کی سمت کے سلسلے میں کا حوالہ دیتا ہے، جس میں اگلے سطر کا رجوع کی جائیں گا کی سمت رکھا جائیگا۔ یہ بلاک ڈائریکشن کا ایک طرح بلاک ڈائریکشن کا CSS ڈسپلے: بلاک; کا علامت (مثلاً <p> اور <div> علامت) پیج پر کس طرح بندوبست کیا جائیگا۔ بلاک ڈائریکشن لکھنے والی زبان کا حوالہ دیتا ہے، مثلاً، منگولی زبان کا نئی سطر بائیں سمت سے درواز سمت میں پھیلایا جاتا ہے، لہذا بلاک ڈائریکشن بائیں سمت سے درواز سمت میں ہوتا ہے، جبکہ انگریزی پیج کا بلاک ڈائریکشن نیچے سمت میں ہوتا ہے۔ بلاک ڈائریکشن کا حوالہ CSS پرزوائز کے ذریعے دیا جاسکتا ہے، مثلاً، writing-mode 来定义。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。

注意：此属性仅在块方向的 scroll-snap-align 属性设置为 'end' 时才起作用。

要看到 scroll-padding-block-end 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-padding-block-end 和 scroll-snap-type 属性。

实例

例子 1

设置从容器末端到吸附位置的块方向滚动内边距为 20px：

div {
  scroll-padding-block-end: 20px;
}

亲自试一试

例子 2：图片库

在具有吸附行为的图片画廊中，可以使用 scroll-padding-block-end 属性将图片推至固定元素上方：

#container {
  scroll-padding-block-end: 30px;
}

亲自试一试

例子 3

当容器元素的 writing-mode 属性值设置为 vertical-rl 时，块方向上的容器末端和子元素从底部移动到左侧。这会影响滚动吸附行为以及 scroll-padding-block-end 属性的工作方式：

#container {
  scroll-padding-block-end: 20px;
  writing-mode: vertical-rl;
}

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

ਸਲਾਹ:CSS scroll-snap-align ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹ:CSS scroll-snap-type ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹ:CSS writing-mode ਪ੍ਰਾਪਰਟੀ