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

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

scroll-margin-right 属性指定吸附位置与容器之间的距离。

吸附位置是指子元素在停止滚动时，其在容器中固定到位的位置。吸附位置通过 scroll-snap-align ਗੁਣ ਦੇ ਸੈਟ ਕਰਨ ਤੋਂ ਵੀ ਪ੍ਰਭਾਵਿਤ ਹੋ ਸਕਦਾ ਹੈ direction ਅਤੇ writing-mode ਪ੍ਰਭਾਵ ਦਾ

ਧਿਆਨ:ਇਸ ਗੁਣ ਨੂੰ ਸਥਾਨ ਨਿਰਧਾਰਕ ਨੂੰ ਉਸ ਦੇ ਉਪ ਤੱਤ ਦੇ ਸੱਜੇ ਪਾਸੇ ਤੇ ਸੈਟ ਕਰਨ ਤੇ ਹੀ ਪ੍ਰਭਾਵੀ ਹੁੰਦਾ ਹੈ。

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

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਸਥਾਨ ਨਿਰਧਾਰਕ ਅਤੇ ਕੰਟੇਨਰ ਦਰਮਿਆਨ ਸਕਰੋਲ ਬਾਹਰੀ ਮਾਰਜਿਨ 20px ਸੈਟ ਕਰੋ:

div {
  scroll-margin-right: 20px;
}

ਆਪਣੇ ਆਪ ਦੱਸੋ

ਉਦਾਹਰਣ 2: ਚਿੰਨ੍ਹ ਭੰਡਾਰ

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

#container > img {
  scroll-margin-right: 30px;
}

ਆਪਣੇ ਆਪ ਦੱਸੋ

ਉਦਾਹਰਣ 3: ਸਥਾਨ ਨਿਰਧਾਰਕ

ਕਿਉਂਕਿ: scroll-margin-right ਗੁਣ ਨੂੰ ਕੰਮ ਕਰਨ ਵਾਲਾ ਹੁੰਦਾ ਹੈ, ਸਥਾਨ ਨਿਰਧਾਰਕ ਨੂੰ ਉਸ ਦੇ ਉਪ ਤੱਤ ਦੇ ਸੱਜੇ ਪਾਸੇ ਤੇ ਸੈਟ ਕਰਨਾ ਹੈ।ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ:direction ਗੁਣ ਨੂੰ ਸਥਾਨ ਨਿਰਧਾਰਕ ਨੂੰ ਉਸ ਦੇ ਉਪ ਤੱਤ ਦੇ ਪਾਸੇ ਤੋਂ ਸੱਜੇ ਪਾਸੇ ਤੱਕ ਬਦਲ ਦਿੰਦਾ ਹੈ।ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ:scroll-margin-right ਗੁਣ ਹੁਣ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-right: 30px;
  scroll-snap-align: none end;
}

ਆਪਣੇ ਆਪ ਦੱਸੋ

CSS ਗਰਿੱਖ

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

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
0 ਸਕਰੋਲ ਬਾਹਰੀ ਮਾਰਜਿਨ ਦੇ ਮੁੱਢਲੇ ਪਾਸੇ 0 ਹੈ।ਮੂਲ ਮੁੱਲ。
length

px, pt, cm ਆਦਿ ਇਕਾਈਆਂ ਨਾਲ ਸਕਰੋਲ ਬਾਹਰੀ ਮਾਰਜਿਨ ਦੇ ਮੁੱਢਲੇ ਪਾਸੇ ਦਾ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ।ਨਾਗਰਿਕ ਮੁੱਲਾਂ ਦੀ ਸ਼ਲਾਘਾ ਕੀਤੀ ਜਾਂਦੀ ਹੈ。

ਦੇਖੋ:سی ایس ایس یونٹ.
initial ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ 'ਤੇ ਸੈਟ ਕਰੋ।ਦੇਖੋ: initial.
inherit ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮਾਤਾ ਤੱਤ ਤੋਂ ਵਿਰਾਸਤ ਕਰੋ।ਦੇਖੋ: inherit.

ਤਕਨੀਕੀ ਵੇਰਵਾ

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

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

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

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

ਸਬੰਧਤ ਪੰਨੇ

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

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

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

ਸਲਾਹਦਾਰੀ:CSS writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ