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

دینشا اور استعمال

scroll-snap-type پروپرتی کی داری، جب آپ سکرول سگت، عناصر کس طرح کی تیار تیار کریگا اور سگت کی سمت کریگا.

ਸਰਕਲ ਸਰਕਲ ਵਿਵਹਾਰ ਲਈ ਪੈਰੰਟ ਇਲਾਕੇ 'ਤੇ ਸੈਟ ਕਰੋ। scroll-snap-type ਵਿਸ਼ੇਸ਼ਤਾ ਅਤੇ ਉਸ ਦੇ ਪੁੱਛੇ ਇਲਾਕੇ 'ਤੇ scroll-snap-align ਵਿਸ਼ੇਸ਼ਤਾ。

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

x ਅਕਸ਼ 'ਤੇ ਸਰਕਲ ਸਰਕਲ ਸੈਟ ਕਰੋ:

#container {
  scroll-snap-type: x mandatory;
}

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

ਉਦਾਹਰਣ 2: x ਅਤੇ y ਅਕਸ਼ 'ਤੇ ਸਰਕਲ ਕਰਨ

x ਅਤੇ y ਅਕਸ਼ 'ਤੇ ਸਰਕਲ ਸੈਟ ਕਰੋ。 scroll-snap-type ਵਿਸ਼ੇਸ਼ਤਾ:

#container > div {
  scroll-snap-type: both mandatory;
}





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

ਉਦਾਹਰਣ 3: ਨੇੜਲੇ ਵਿਵਹਾਰ ਨਾਲ ਸਰਕਲ ਕਰਨ

x ਅਤੇ y ਅਕਸ਼ 'ਤੇ ਨੇੜਲੇ ਵਿਵਹਾਰ ਨਾਲ ਸਰਕਲ ਸੈਟ ਕਰੋ。 scroll-snap-type ਵਿਸ਼ੇਸ਼ਤਾ। ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਜਦੋਂ ਸਰਕਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਦੋ ਵੱਖ-ਵੱਖ ਇਲਾਕਿਆਂ ਦੇ ਮਧਿਆ ਵਿੱਚ ਰੁਕਦੀ ਹੈ ਤਾਂ ਸਰਕਲ ਨਹੀਂ ਹੋਵੇਗਾ:

#container > div {
  scroll-snap-type: both proximity;
}





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

CSS ਗਰਮਾਤਰਾ

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
none ਸਰਕਲ ਅਟੈਕਸ ਨਹੀਂ ਹੈ। ਮੂਲ ਮੁੱਲ。
x x ਅਕਸ਼ 'ਤੇ ਸਰਕਲ ਅਟੈਕਸ ਸੈਟ ਕਰੋ。
y y ਅਕਸ਼ 'ਤੇ ਸਰਕਲ ਅਟੈਕਸ ਸੈਟ ਕਰੋ。
block ਬਲਾਕ ਅਕਸ਼ 'ਤੇ ਸਰਕਲ ਅਟੈਕਸ ਸੈਟ ਕਰੋ。
inline ਰੂਪ ਅਕਸ਼ 'ਤੇ ਸਰਕਲ ਅਟੈਕਸ ਸੈਟ ਕਰੋ。
both x ਅਤੇ y ਅਕਸ਼ਾਂ 'ਤੇ ਸਰਕਲ ਅਟੈਕਸ ਸੈਟ ਕਰੋ。
mandatory ਸਰਕਲ ਕਰਨ ਪੂਰਾ ਹੋਣ ਤੋਂ ਬਾਅਦ ਸਰਕਲ ਆਪਣੇ ਅਟੈਕਸ ਨੂੰ ਆਪਣੇ ਆਪ ਜਾਵੇਗਾ。
proximity

mandatory ਨਾਲ ਸਮਾਨ ਲੇਕਿਨ ਉਸ ਤੋਂ ਲਚਕੀਲਾ ਹੈ。

ਸਰਕਲ ਕਰਨ ਪੂਰਾ ਹੋਣ ਤੋਂ ਬਾਅਦ ਸਰਕਲ ਆਪਣੇ ਅਟੈਕਸ ਨੂੰ ਆਪਣੇ ਆਪ ਜਾਵੇਗਾ ਪਰ ਅਟੈਕਸ ਵਿੱਚ ਇੱਕ ਖੇਤਰ ਹੋਵੇਗਾ ਜਿਸ ਵਿੱਚ ਅਟੈਕਸ ਨਹੀਂ ਹੋਵੇਗਾ。

ਬਰਾਊਜ਼ਰ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਨਿਰਭਰ ਕਰਦਾ ਹੈ。
initial ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ ਤੇ ਸੈਟ ਕਰੋ। ਦੇਖੋ: initial。
inherit ਆਪਣੇ ਮਾਤਾ ਇਲਾਕੇ ਤੋਂ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਲੈ ਲਓ। ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲ ਮੁੱਲ: none
ਵਿਰਾਸਤੀਕਰਣ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ: ਸਮਰਥਨ ਨਹੀਂ ਹੈ। ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਵਿਸ਼ੇਸ਼ਤਾ。
ਸੰਸਕਰਣ: CSS3
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰਮਾਤਰਾ: object.style.scrollSnapType="x mandatory"

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

ਸਟੇਬਲ ਵਿੱਚ ਦਿਖਾਈ ਵਾਲੇ ਨੰਬਰ ਇਹ ਪਹਿਲਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲਾ ਬਰਾਊਜ਼ਰ ਦਾ ਸੰਸਕਰਣ ਹੈ。

ਚਰਮੋਕ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
69.0 79.0 99.0 11.0 56.0

ਸਬੰਧਤ ਪੰਨੇ

ਸਬੰਧਤ ਜਾਣਕਾਰੀ:CSS scroll-snap-align ਪ੍ਰਤੀਯੋਗਿਤਾ