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

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

scroll-padding-top ਇਸ ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਿੱਚ ਕੰਟੇਨਰ ਤੋਂ ਉਪ ਤੱਤ ਅਟੈਕਸ਼ਨ ਸਥਾਨ ਤੱਕ ਦੀ ਦੂਰੀ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ。

ਅਟੈਕਸ਼ਨ ਸਥਾਨ ਇਹ ਹੈ ਕਿ ਜਦੋਂ ਰੋਲਿੰਗ ਸਤਾਹਿਤ ਹੋਵੇ, ਉਸ ਵੇਲੇ ਉਪ ਤੱਤ ਕੰਟੇਨਰ ਵਿੱਚ ਅਟੈਕਸ਼ਨ ਸਥਾਨ ਤੱਕ ਪਹੁੰਚਿਆ ਹੋਵੇ。

吸附位置由 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction ਅਤੇ writing-mode ਸੈਟ ਕਰੋ

ਦੇ ਪ੍ਰਭਾਵ ਨੂੰਧਿਆਨ:

ਇਸ ਗੁਣ ਨੂੰ ਸਥਾਨ ਨੂੰ ਉਸ ਦੇ ਉਪ ਐਲੀਮੈਂਟ ਦੇ ਉੱਪਰ ਤੱਕ ਸੈਟ ਕਰਨ ਵਾਲੇ ਹੋਣ ਤਾਂ ਹੀ ਪ੍ਰਭਾਵੀ ਹੈ。 scroll-padding-top ਗੁਣ ਨੂੰ ਸੈਟ ਕਰੋ scroll-snap-align ਗੁਣ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ ਦੇਖਣ ਲਈ ਪ੍ਰਾਪਤ ਕਰੋ scroll-padding-top ਅਤੇ scroll-snap-type ਗੁਣ

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਸਕਰੋਲ ਇਨਡੈਂਟ ਨੂੰ ਕੰਟੇਨਰ ਦੇ ਉੱਪਰ ਤੋਂ ਸਥਾਨ ਨੂੰ 20px ਦੀ ਦੂਰੀ 'ਤੇ ਸੈਟ ਕਰੋ:

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

ਆਪਣੇ ਆਪ ਦੋਹਰਾਓ

ਉਦਾਹਰਣ 2: ਚਿੰਨ੍ਹ ਕਾਰਸਲ

scroll-padding-top ਗੁਣ ਇੱਕ ਸਥਾਨਾਂ ਵਾਲੇ ਚਿੰਨ੍ਹ ਦੀ ਗੈਲਰੀ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਤਾਂ ਕਿ ਚਿੰਨ੍ਹ ਫਿਕਸਡ ਐਲੀਮੈਂਟ ਦੇ ਨੇੜੇ ਹੋਣ।

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

ਆਪਣੇ ਆਪ ਦੋਹਰਾਓ

ਉਦਾਹਰਣ 3: ਸਿਰਫ ਉੱਪਰ ਵਿੱਚ ਸਕਰੋਲ ਇਨਡੈਂਟ ਸਥਾਪਿਤ ਕਰੋ

ਦੋਵੇਂ ਦਿਸ਼ਾਵਾਂ 'ਤੇ ਸਥਾਨ ਸਥਾਪਿਤ ਕੀਤੇ ਗਏ ਹੋਣ ਤਾਂ ਵੀ ਕੰਟੇਨਰ 'ਤੇ scroll-padding-top ਗੁਣ ਨੂੰ ਵਰਤੋਂ ਕਰੋ।ਅਗਲੇ ਐਲੀਮੈਂਟ ਤੱਕ ਲੈਂਡ ਸਕਰੋਲ ਕਰੋ ਅਤੇ ਪ੍ਰਭਾਵ ਦੇਖੋ:

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

ਆਪਣੇ ਆਪ ਦੋਹਰਾਓ

ਉਦਾਹਰਣ 4: ਸਥਾਨ ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ

ਕਰਨ ਲਈ scroll-padding-top ਗੁਣ ਨੂੰ ਕੰਮ ਕਰਨ ਵਾਲਾ ਹੈ, ਸਥਾਨ ਨੂੰ ਉਸ ਦੇ ਉਪ ਐਲੀਮੈਂਟ ਦੇ ਉੱਪਰ ਤੱਕ ਸੈਟ ਕਰਨਾ ਹੈ।ਇਸ ਉਦਾਹਰਣ ਵਿੱਚwriting-mode ਗੁਣ ਨੂੰ ਸਥਾਨ ਨੂੰ ਉਸ ਦੇ ਉਪ ਐਲੀਮੈਂਟ ਦੇ ਉੱਪਰ ਤੋਂ ਉਸ ਦੇ ਦਾਹਿਆਂ ਤੱਕ ਬਦਲ ਦਿੰਦਾ ਹੈ।ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏscroll-padding-top ਗੁਣ ਹੁਣ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

ਆਪਣੇ ਆਪ ਦੋਹਰਾਓ

CSS ਗਰੰਥ

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

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
auto ਮੂਲ ਮੁੱਲ
length

px, pt, cm ਆਦਿ ਦੇ ਸਮਾਨ ਏਕਾਈਆਂ ਨਾਲ scroll-padding-top ਨਿਰਧਾਰਿਤ ਕਰੋ。

ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕੀਤੀ ਜਾਵੇ।ਦੇਖੋ:CSS ਇਕਾਈ.
% ਸਮਾਵੇਸ਼ ਐਲੀਮੈਂਟ ਦੀ ਚੌਡਾਈ ਦੇ ਪ੍ਰਤੀਸ਼ਤ ਵਜੋਂ ਇਨਡੈਂਟ ਦੀ ਪ੍ਰਤੀਸ਼ਤ ਨਿਰਧਾਰਿਤ ਕਰੋ。
initial ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ 'ਤੇ ਸੈਟ ਕਰੋ।ਦੇਖੋ: initial.
inherit ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮਾਤਾ ਐਲੀਮੈਂਟ ਤੋਂ ਵਿਰਾਸਤੀਕਰਣ ਕਰੋ।ਦੇਖੋ: inherit.

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲ ਮੁੱਲ: auto
ਵਿਰਾਸਤੀਕਰਣ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ: ਸਮਰੱਥਾ ਨਹੀਂ ਹੈ।ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਗੁਣ.
ਸੰਸਕਰਣ: ਸੀਐੱਸਐੱਸ3
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੰਥ: object.style.scrollPaddingTop="20px"

ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ

ਸਪਰਸ਼ਦ ਚਿੰਨ੍ਹ ਦੇ ਅਨੁਸਾਰ ਪਹਿਲੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇਸ ਗੁਣ ਦੀ ਸਮਰੱਥਾ ਵਾਲੇ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਨੰਬਰ ਦਰਸਾਉਂਦੇ ਹਨ。

ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
69.0 79.0 68.0 14.1 56.0

ਸਬੰਧਤ ਪੰਨੇ

ਸਲਾਹਦਾਰ:CSS ڈائریکشن پرپارٹ

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

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

ਸਲਾਹਦਾਰ:CSS writing-mode ਵਿਸ਼ੇਸ਼ਤਾ