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

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

scroll-margin ਪ੍ਰਤੀਯੋਗੀ ਜੁੜਨ ਵਾਲੀ ਸਥਿਤੀ ਅਤੇ ਟ੍ਰੇਨਰ ਵਿਚਕਾਰ ਦੂਰੀ ਸੈਟ ਕਰਦੀ ਹੈ。

ਇਹ ਮਤਲਬ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਸਰੋਤਰੀ ਬੰਦ ਕਰੋ ਤਾਂ, ਸਰੋਤਰੀ ਤੇਜ਼ੀ ਨਾਲ ਸਥਾਨਾਂ ਨੂੰ ਸਥਾਨਾਂ ਨਾਲ ਸਥਾਨਾਂ ਦੀ ਨਿਰਧਾਰਿਤ ਦੂਰੀ ਨਾਲ ਰੋਕ ਦਿੰਦੀ ਹੈ。

ਜੁੜਨ ਵਾਲੀ ਸਥਿਤੀ ਇਹ ਹੈ ਕਿ ਉਪ-ਤੱਤ ਜਦੋਂ ਸਰੋਤਰੀ ਬੰਦ ਹੋਣ ਤਾਂ, ਟ੍ਰੇਨਰ ਵਿੱਚ ਜੁੜਨ ਵਾਲੀ ਸਥਿਤੀ ਵਿੱਚ ਹੈ。

scroll-margin ਪ੍ਰਤੀਯੋਗੀ ਹੈ ਨਿਮਨ ਪ੍ਰਤੀਯੋਗੀਆਂ ਦਾ ਸ਼ਾਬਦਿਕ ਰੂਪ:

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

ਜੇਕਰ scroll-margin ਪ੍ਰਤੀਯੋਗੀ ਚਾਰ ਕੀਮਤਾਂ ਵਾਲਾ ਹੈ ਤਾਂ:

scroll-margin: 15px 30px 60px 90px;
  • ਉੱਪਰੀ ਦੂਰੀ 15px ਹੈ
  • ਸਮੇਤ ਦੀ ਦੂਰੀ 30px ਹੈ
  • ਨਿਚੋਰੀ ਦੀ ਦੂਰੀ 60px ਹੈ
  • ਸਾਥੀ ਦੀ ਦੂਰੀ 90px ਹੈ

ਜੇਕਰ scroll-margin ਪ੍ਰਤੀਯੋਗੀ ਤਿੰਨ ਕੀਮਤਾਂ ਵਾਲਾ ਹੈ ਤਾਂ:

scroll-margin: 15px 30px 60px;
  • ਉੱਪਰੀ ਦੂਰੀ 15px ਹੈ
  • ਸਾਥ ਅਤੇ ਸਿਧੇ ਪਾਸੇ ਦੀ ਦੂਰੀ 30px ਹੈ
  • ਨਿਚੋਰੀ ਦੀ ਦੂਰੀ 60px ਹੈ

ਜੇਕਰ scroll-margin ਪ੍ਰਤੀਯੋਗੀ ਹੈ ਤਾਂ:

scroll-margin: 15px 30px;
  • ਉੱਚ ਅਤੇ ਨੀਚੇ ਦੀ ਦੂਰੀ 15px ਹੈ
  • ਸਾਥ ਅਤੇ ਸਿਧੇ ਪਾਸੇ ਦੀ ਦੂਰੀ 30px ਹੈ

ਜੇਕਰ scroll-margin ਗੁਣ ਵਿੱਚ ਇੱਕ ਮੁੱਲ ਹੈ:

scroll-margin: 10px;
  • ਚਾਰ ਧਿਰਾਂ ਦੀ ਦੂਰੀ 10px ਹੈ

ਦੇਖਣ ਲਈ scroll-margin ਗੁਣ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ ਦੇਖਣ ਲਈ scroll-margin ਅਤੇ scroll-snap-align ਗੁਣ scroll-snap-type ਗੁਣ

ਧਿਆਨ:ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਸਾਰੇ ਪਾਸੇ ਸਰਕਲ ਮਾਰਜਿਨ ਸੈਟ ਕੀਤੇ ਗਏ ਹਨ, ਪਰ ਕਿਉਂਕਿ scroll-snap-align ਗੁਣ ਨੂੰ "start" ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ ਇਸ ਲਈ ਸਿਰਫ਼ ਉੱਚੇ ਸਰਕਲ ਮਾਰਜਿਨ ਨੂੰ ਸਰਕਲ ਕਰਨ ਵਾਲਾ ਪ੍ਰਭਾਵ ਬਦਲਿਆ ਹੈ。

ਇੰਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਸਮਰਥਨ ਸਥਾਨ ਅਤੇ ਕੰਟੇਨਰ ਵਿੱਚ ਸਰਕਲ ਮਾਰਜਿਨ ਨੂੰ 20px ਸੈਟ ਕਰੋ:

div {
  scroll-margin: 20px;
}

ਆਪਣੇ ਆਪ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 2: ਚਿੱਤਰ ਕਲੈਕਸ਼ਨ

scroll-margin ਇਸ ਗੁਣ ਨੂੰ ਸਮਰਥਨ ਦੇਣ ਵਾਲੇ ਚਿੱਤਰ ਕਲੈਕਸ਼ਨ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਇੱਥੇscroll-margin ਯੂਜ਼ਰ ਨੂੰ ਇਹ ਦਿਸਾਉਣ ਲਈ ਸਮਰਥ ਹੈ ਕਿ ਸਾਥ ਵਿੱਚ ਇੱਕ ਹੋਰ ਚਿੱਤਰ ਹੈ। ਪਹਿਲੇ ਚਿੱਤਰ ਨੂੰ ਸਰਕਲ ਕਰਨ ਵਾਲੇ ਪ੍ਰਭਾਵ ਨੂੰ ਦੇਖੋ:

#container > img {
  scroll-margin: 0 0 0 30px;
}
ਬੀਜਿਂਗ ਨਰਸ਼ਨ ਵਿਹਾਨ ਟੁਲੀਪ ਹੰਗਝੂ

ਆਪਣੇ ਆਪ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 3: ਨੇੜੇ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਸਰਕਲ ਮਾਰਜਿਨ ਸੈਟ ਕਰੋ

ਇਲਾਕੇ ਦੇ ਨੇੜੇ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ scroll-margin ਗੁਣ। ਹਰੀਜ਼ੋਂ ਅਤੇ ਸਿਧੇ ਸਰਕਲ ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਅਗਲੇ ਤੱਤ ਤੱਕ ਸਰਕਲ ਕਰਨ ਵਾਲੇ ਪ੍ਰਭਾਵ ਨੂੰ ਦੇਖੋ:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





ਆਪਣੇ ਆਪ ਕੋਸ਼ਿਸ਼ ਕਰੋ

CSS ਗਰਮਾਤਰਾਂ

scroll-margin: 0|value|initial|inherit;

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
0 ਸਰਕਲ ਮਾਰਜਿਨ ਝੀਲਾ ਹੈ। ਮੂਲ ਮੁੱਲ。
length

ਸੰਦਰਭ ਵਿੱਚ ਪਿਛੋਕੜ ਦੇ ਪੱਧਰ ਨੂੰ ਪਿਛੋਕੜ ਰੰਗ ਦੇ ਅਨੁਸਾਰ ਸੈਟ ਕਰੋ।

ਦੇਖੋ:CSS ਯੂਨਿਟ.
initial ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ 'ਤੇ ਸੈਟ ਕਰੋ। ਦੇਖੋ: initial.
inherit ਇਸ ਗੁਣ ਨੂੰ ਆਪਣੇ ਮਾਤਾ ਤੱਤ ਤੋਂ ਵਿਰਾਸਤ ਕਰੋ। ਦੇਖੋ: inherit.

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

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

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

ਸਬੰਧਤ ਪੰਨੇ

ਸਥਾਨਾਂਤਰਣਕਰਨCSS scroll-margin-bottom کی خاصیت

ਸਥਾਨਾਂਤਰਣਕਰਨCSS scroll-margin-left کی خاصیت

ਸਥਾਨਾਂਤਰਣਕਰਨCSS scroll-margin-right کی خاصیت

ਸਥਾਨਾਂਤਰਣਕਰਨCSS scroll-margin-top کی خاصیت

ਸਥਾਨਾਂਤਰਣਕਰਨCSS scroll-snap-align کی خاصیت

ਸਥਾਨਾਂਤਰਣਕਰਨCSS scroll-snap-type کی خاصیت