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

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

scroll-padding ਪ੍ਰਤੀਯੋਗੀ ਕੰਟੇਨਰ ਤੋਂ ਉਪ-ਏਕਾਈ ਦੇ ਜ਼ਮੀਨੀ ਸਥਾਨ ਤੱਕ ਦੀ ਦੂਰੀ ਸੈਟ ਕਰਦਾ ਹੈ。

ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਰੋਲਿੰਗ ਰੁਕਾਉਂਦੇ ਹੋ ਤਾਂ ਰੋਲਿੰਗ ਤੇਜ਼ੀ ਨਾਲ ਸਾਬਤ ਸਥਾਨ ਤੱਕ ਆਉਂਦਾ ਹੈ ਅਤੇ ਇਸ ਦੀ ਦੂਰੀ ਕੰਟੇਨਰ ਤੋਂ ਫੋਕਸ ਉਪ-ਏਕਾਈ ਦੇ ਜ਼ਮੀਨੀ ਸਥਾਨ ਤੱਕ ਨਿਰਧਾਰਿਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ。

ਜ਼ਮੀਨੀ ਸਥਾਨ ਇਹ ਹੈ ਕਿ ਸਬੰਧਤ ਉਪ-ਏਕਾਈ ਜਦੋਂ ਰੋਲਿੰਗ ਰੁਕਦੀ ਹੈ ਤਾਂ ਇਹ ਕੰਟੇਨਰ ਵਿੱਚ ਲਗਾਤਾਰ ਥਾਂ ਪਾਉਂਦੀ ਹੈ。

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

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

ਜੇਕਰ scroll-padding ਪ੍ਰਤੀਯੋਗੀ ਚਾਰ ਮੁੱਲ ਹਨ:

scroll-padding: 15px 30px 60px 90px;
  • ਟੋਪੀ ਦੀ ਦੂਰੀ 15px ਹੈ
  • ਪਾਛਲਾ ਸਾਥਨ 30px ਹੈ
  • ਪਾਠੀ ਦੀ ਦੂਰੀ 60px ਹੈ
  • ਸਾਥਨ ਦੀ ਦੂਰੀ 90px ਹੈ

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

scroll-padding: 15px 30px 60px;
  • ਟੋਪੀ ਦੀ ਦੂਰੀ 15px ਹੈ
  • ਸੱਦੇ ਅਤੇ ਦਾਹਿਆਂ ਦੀ ਦੂਰੀ 30px ਹੈ
  • ਪਾਠੀ ਦੀ ਦੂਰੀ 60px ਹੈ

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

scroll-padding: 15px 30px;
  • ਟੋਪੀ ਅਤੇ ਪਾਠੀ ਦੀ ਦੂਰੀ 15px ਹੈ
  • ਸੱਦੇ ਅਤੇ ਦਾਹਿਆਂ ਦੀ ਦੂਰੀ 30px ਹੈ

ਜੇਕਰ scroll-padding ਗੁਣ ਨੂੰ ਇੱਕ ਮੁੱਲ ਹੈ:

scroll-padding: 10px;
  • ਸਾਰੇ ਚਾਰ ਪਾਸਿਆਂ ਦੀ ਦੂਰੀ 10px ਹੈ

ਸੈਟ ਕਰੋ scroll-padding ਪ੍ਰਭਾਵ ਨੂੰ ਦੇਖਣ ਲਈ scroll-snap-align ਗੁਣ scroll-padding ਅਤੇ scroll-snap-type ਗੁਣ

ਧਿਆਨ:ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਸਾਰੇ ਚਾਰ ਪਾਸੇ ਦੇ ਸਰਕਲ ਪੈਡਿੰਗ ਸੈਟ ਕੀਤੇ ਗਏ ਹਨ, ਪਰ scroll-snap-align "start" ਵਜੋਂ ਸੈਟ ਕੀਤਾ ਜਾਵੇ ਤਾਕਿ ਸਿਰਫ਼ ਉੱਪਰ ਦੀ ਸਰਕਲ ਪੈਡਿੰਗ ਦਾ ਸਰਕਲ ਕਰਨਾ ਬਦਲ ਜਾਵੇ

ਇੰਸਟੈਂਸ

ਉਦਾਹਰਣ 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。
inherit ਆਪਣੇ ਮਾਤਾ ਤੱਤ ਤੋਂ ਇਸ ਗੁਣ ਨੂੰ ਵਿਰਾਸਤ ਕਰੋ। ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

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

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

Chrome Edge Firefox Safari Opera
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 ਪ੍ਰਤੀਯੋਗਿਤਾ