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

ਡਿਫਾਇਨੇਸ਼ਨ ਅਤੇ ਵਰਤੋਂ

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

ਸਥਾਨ ਨੂੰ ਸਥਾਨ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਜਦੋਂ ਸਰਕੋਲ ਸਟੋਪ ਹੁੰਦਾ ਹੈ ਤਾਂ ਉਸ ਦਾ ਸਥਾਨ ਕੰਟੇਨਰ ਵਿੱਚ ਲੱਗਦਾ ਹੈ।ਸਥਾਨ ਨੂੰ ਸਥਾਨ ਨਾਲ ਦੂਰੀ ਗੁਣ ਰਾਹੀਂ ਸੈਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。 scroll-snap-align ਗੁਣ ਦੇ ਸੈਟ ਕੀਤੇ ਜਾਣ ਦੇ ਨਾਲ-ਨਾਲ ਸੀਐੱਸਐੱਸ ਗੁਣ direction ਅਤੇ writing-mode ਦੇ ਪ੍ਰਭਾਵ

ਧਿਆਨ:ਇਹ ਗੁਣ ਸਿਰਫ ਜਦੋਂ ਸਥਾਨ ਨੂੰ ਸਬੰਧਤ ਐਲੀਮੈਂਟ ਦੇ ਉੱਪਰੋਕਤ 'ਤੇ ਸੈਟ ਕੀਤਾ ਜਾਵੇ ਤਾਂ ਹੀ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੁੰਦਾ ਹੈ。

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

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਸਥਾਨ ਨੂੰ ਸਥਾਨ ਨਾਲ ਉੱਪਰੀ ਸਰਕੋਲ ਬਾਹਰੀ ਮਾਰਜਿਨ 20px ਸੈਟ ਕਰੋ:

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

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2: ਚਿੱਤਰ ਕਾਰਖਾਨਾ

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

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

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 3: ਸਥਾਨ ਨੂੰ ਲੱਗਾਓ

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

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

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਸੀਐੱਸਐੱਸ ਗਰੰਥ

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

ਗੁਣ ਮੁੱਲ

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

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

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

ਤਕਨੀਕੀ ਵੇਰਵਾ

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

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

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

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

56.0

ਸਬੰਧਤ ਸਾਈਟਾਂCSS ڈائریکشن اپریٹ

ਸਬੰਧਤ ਸਾਈਟਾਂCSS scroll-snap-align ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਬੰਧਤ ਸਾਈਟਾਂCSS scroll-snap-type ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਬੰਧਤ ਸਾਈਟਾਂCSS writing-mode ਪ੍ਰਾਪਰਟੀ