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

ਵਿਵਰਣ ਅਤੇ ਵਰਤੋਂ

scroll-padding-block ਪ੍ਰਤੀਯੋਗੀ ਬਲਕ ਦਿਸ਼ਾ 'ਚ, ਕੰਟੇਨਰ ਤੋਂ ਉਪ ਸਮਾਨ ਦੀ ਜਾਲਸਾ ਸਥਾਨ ਦੀ ਦੂਰੀ ਸੈਟ ਕਰਦਾ ਹੈ。

ਇਹ ਮਤਲਬ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਸਰੋਤ ਰੋਲ ਕਰਦੇ ਹੋ ਤਾਂ, ਰੋਲ ਹੌਲੀ ਹੌਲੀ ਸਾਬਤ ਹੋ ਜਾਵੇਗਾ, ਅਤੇ ਬਲਕ ਦਿਸ਼ਾ 'ਚ, ਜਾਲਸਾ ਸਥਾਨ ਅਤੇ ਕੰਟੇਨਰ ਦਰਮਿਆਨ ਸੈਟ ਕੀਤੀ ਗਈ ਦੂਰੀ 'ਚ ਸਤਾਰ ਹੋਵੇਗਾ。

ਬਲਕ ਦਿਸ਼ਾ ਇਹ ਹੈ ਕਿ ਮੌਜੂਦਾ ਲਿਖਣ ਸਥਾਨ ਨਾਲ ਬਾਅਦ ਦੀ ਲਿਖਣ ਸਥਾਨ ਦੀ ਦਿਸ਼ਾ, ਇਹ ਵੀ ਹੈ ਜੋ ਕਿ CSS display: block; ਦੇ ਟੈਗ (ਜਿਵੇਂ <p> ਅਤੇ <div> ਟੈਗ) ਦੀ ਪੰਨੇ 'ਤੇ ਲੈਆਉਣ ਦਾ ਤਰੀਕਾ ਹੈ। ਬਲਕ ਦਿਸ਼ਾ ਲਿਖਣ ਭਾਸ਼ਾ ਨੂੰ ਨਿਰਭਰ ਕਰਦੀ ਹੈ, ਉਦਾਹਰਣ ਵਜੋਂ ਮੰਗੋਲੀਅਨ ਵਿੱਚ ਨਵੀਂ ਲਿਖਣ ਸਥਾਨ ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਵੱਲ ਲਿਖੀ ਜਾਂਦੀ ਹੈ, ਇਸ ਲਈ ਬਲਕ ਦਿਸ਼ਾ ਵੀ ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਵੱਲ ਹੁੰਦੀ ਹੈ, ਜਦਕਿ ਅੰਗਰੇਜ਼ੀ ਪੰਨੇ 'ਚ ਬਲਕ ਦਿਸ਼ਾ ਹੇਠਾਂ ਵੱਲ ਹੁੰਦੀ ਹੈ। ਬਲਕ ਦਿਸ਼ਾ CSS ਪ੍ਰਤੀਯੋਗੀ ਰਾਹੀਂ ਸੈਟ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ writing-mode ਦੇਣ ਵਾਲਾ ਹੈ

ਜਾਲਸਾ ਸਥਾਨ ਇਹ ਹੈ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਸਰੋਤ ਰੋਲ ਕਰਦੇ ਹੋ ਤਾਂ, ਉਪ ਸਮਾਨ ਨੂੰ ਕੰਟੇਨਰ ਵਿੱਚ ਜਾਲਸਾ ਸਥਾਨ 'ਤੇ ਜਾਂਦਾ ਹੈ。

ਧਿਆਨ:ਇਹ ਪ੍ਰਤੀਯੋਗੀ ਕੇਵਲ ਬਲਕ ਦਿਸ਼ਾ 'ਚ ਹੈscroll-snap-align ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ 'start' ਜਾਂ 'end' ਸੈਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਤਾਂ ਪ੍ਰਭਾਵੀ ਹੈ。

scroll-padding-block ਪ੍ਰਤੀਯੋਗੀ ਹੇਠ ਲਿਖੇ ਪ੍ਰਤੀਯੋਗੀਆਂ ਦਾ ਸ਼ਾਬਦਿਕ ਪ੍ਰਤੀਯੋਗੀ ਹੈ:

scroll-padding-block ਪ੍ਰਤੀਯੋਗੀ ਦਾ ਮੁੱਲ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ:

ਜੇਕਰ scroll-padding-block ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਦੋ ਮੁੱਲ ਹਨ:

scroll-padding-block: 10px 50px;
  • ਸ਼ੁਰੂ ਦੀ ਦੂਰੀ 10px ਹੈ
  • ਸਮਾਪਤ ਦੀ ਦੂਰੀ 50px ਹੈ

ਜੇਕਰ scroll-padding-block ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਇੱਕ ਮੁੱਲ ਹੈ:

scroll-padding-block: 10px;
  • ਸ਼ੁਰੂ ਅਤੇ ਸਮਾਪਤ ਦੀ ਦੂਰੀ 10px ਹੈ

ਦੇਖਣਾ ਹੈ scroll-padding-block ਪ੍ਰਤੀਯੋਗੀ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ, ਉਪ ਸਮਾਨਾਂ 'ਤੇ ਸੈਟ ਕਰਨਾ ਹੈ scroll-snap-align 属性，并在父元素上设置 scroll-padding-block 和 scroll-snap-type 属性。

CSS 的 scroll-padding-block 和 scroll-padding-inline 属性与 CSS 属性 CSS scroll-padding-top ਪ੍ਰਤੀਯੋਗਿਤਾ、scroll-padding-bottom、scroll-padding-left 和 scroll-padding-right 非常相似，但 scroll-padding-block 和 scroll-padding-inline 属性依赖于块方向和行内方向。

实例

例子 1

在块方向上，将滚动内边距设置为从容器到吸附位置的 20px：

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

亲自试一试

例子 2：图片库

scroll-padding-block 属性可以用于具有吸附行为的图片画廊，以将图片推到固定元素下方：

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

亲自试一试

例子 3

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

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

亲自试一试

CSS 语法

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

属性值

值 描述
auto 默认值。浏览器计算内边距。
length

以 px、pt、cm 等单位指定 scroll-padding-block。

不允许使用负值。请参阅：سی ایس ایس یونٹ。
% 指定包含元素宽度百分比的内边距。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： auto
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.scrollPaddingBlock="20px"

浏览器支持

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 15.0 56.0

ਸਬੰਧਤ ਪੰਨੇ

ਸਲਾਹਦਾਰਾਂ:CSS scroll-padding-block-end ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰਾਂ:CSS scroll-padding-block-start ਪ੍ਰਤੀਯੋਗਿਤਾ

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

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

ਸਲਾਹਦਾਰਾਂ:CSS writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ