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

ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ ਅਤੇ ਵਰਤੋਂ

scroll-padding-inline-end ਵਿਸ਼ੇਸ਼ਤਾ ਕੰਟੇਨਰ ਦੇ ਅੰਤ ਤੋਂ ਸ਼ਾਖਰ ਅੰਦਰ ਦੀ ਦੂਰੀ ਨੂੰ ਸੈਟ ਕਰਦੀ ਹੈ。

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

ਲਾਈਨ ਅੰਦਰ ਦਿਸ਼ਾ ਇਹ ਹੁੰਦੀ ਹੈ ਜਿਸ ਵਿੱਚ ਅਗਲਾ ਅੱਖਰ ਮੌਜੂਦਾ ਅੱਖਰ ਦੇ ਬਾਅਦ ਲਾਈਨ ਵਿੱਚ ਸਥਾਨ ਨੂੰ ਪਾਉਂਦਾ ਹੈ, ਇਹ ਵੀ ਹੈ ਜਿਸ ਵਿੱਚ CSS display: inline; ਦੇ ਟੈਗ (ਜਿਵੇਂ <a> ਅਤੇ <strong> ਟੈਗ) ਲਾਈਨ ਵਿੱਚ ਸਥਾਨ ਨੂੰ ਪਾਉਂਦੇ ਹਨ। ਲਾਈਨ ਅੰਦਰ ਦਿਸ਼ਾ ਲਿਖਣ ਭਾਸ਼ਾ ਉੱਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ, ਉਦਾਹਰਣ ਲਈ ਅਰਬੀ ਦੇ ਨਵੇਂ ਅੱਖਰ ਸੱਜੇ ਤੋਂ ਵੱਲ ਲਿਖੇ ਜਾਂਦੇ ਹਨ, ਇਸ ਲਈ ਲਾਈਨ ਅੰਦਰ ਦਿਸ਼ਾ ਸੱਜੇ ਤੋਂ ਵੱਲ ਹੁੰਦੀ ਹੈ, ਜਦਕਿ ਅੰਗਰੇਜ਼ੀ ਪੰਨੇ ਦੀ ਲਾਈਨ ਅੰਦਰ ਦਿਸ਼ਾ ਸੱਜੇ ਤੋਂ ਵੱਲ ਹੁੰਦੀ ਹੈ। ਲਾਈਨ ਅੰਦਰ ਦਿਸ਼ਾ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਰਾਹੀਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ direction 和 writing-mode ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ。

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

ਧਿਆਨ:ਇਹ ਪ੍ਰਤੀਯੋਗਿਤਾ ਹੀਨ ਉੱਤੇ ਹੀ ਹੈ scroll-snap-align 属性 ਹੀਨ ਲਈ 'end' ਸੈਟ ਕੀਤੇ ਹੋਣ ਉੱਤੇ ਹੀ ਕੰਮ ਕਰਦਾ ਹੈ。

要看到 scroll-padding-inline-end 屬性的效果，必須在子元素上設定 scroll-snap-align 屬性，並在父元素上設定 scroll-padding-inline-end 和 scroll-snap-type 屬性。

實例

例子 1

設定從容器末端到對齊位置的行內方向滾動內邊距為 20px：

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

亲自试一试

例子 2：圖片庫

scroll-padding-inline-end 屬性可以在具有對齊行為的圖片廊中中使用，以將圖片從固定元素後面推出：

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

亲自试一试

例子 3

當容器元素的 writing-mode 屬性值設定為 'vertical-rl' 時，行內方向上容器和子元素的起始位置從左側移動到頂部，而末端從右側移動到底部。這會影響滾動對齊行為以及 scroll-padding-inline-end 属性的工作方式：

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

亲自试一试

例子 4

當容器元素的 direction 屬性值設定為 'rtl' 時，行內方向上容器和子元素的末端從右側移動到左側。這會影響滾動對齊行為以及 scroll-padding-inline-end 属性的工作方式：

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

亲自试一试

CSS 语法

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

屬性值

技术細節

浏览器支持

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

相关頁面

ਸਲਾਹ:CSS دیکشن کا حصہ

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

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

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