CSS scroll-margin-block پراپرتی

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

scroll-margin-block پراویژن بندھنا سمت پر، بندھنا سمت (snap position) اور کانٹینر کے درمیان کا فاصلہ سیٹ کردا ہے.

یعنی جب آپ رولنگ کا عمل بند کردیاں تو، رولنگ تیزی سے تیزی سے بندھنا سمت کا مقام پر بندھ جاتا ہے.

بلاک سمت یعنی نئی سطر کی سمت، جو موجودہ سطر کی مقام کے نزدیک رکھی جاتی ہے، یہ بھی CSS display: block; کا تگ (جیسا کہ <p> اور <div> تگ) کا صفائی کا طریقہ ہے، جو صفائی پر رکھا جاتا ہے، مثلاً، ترک منگولی کا نئی سطر سمت سمت سے رکھا جاتا ہے، اس لئے بلاک سمت بھی سمت سمت سے رکھی جاتی ہے، جبکہ انگریزی صفائی کا بلاک سمت نیچے سمت سے رکھا جاتا ہے، بلاک سمت CSS پراویژن کے ذریعے سیٹ کی جاسکتی ہے: writing-mode تعلیم دینا.

بندھنا سمت کا مطلب یہ ہے کہ جب آپ رولنگ کا عمل بند کردیاں تو، ذیلی عنصر کانٹینر میں بندھنا سمت پر بندھنا سمت کا مقام پر بندھ جاتا ہے.

توجہ:یہ پراویژن صرف بلاک سمت میں: scroll-snap-align پراویژن کا ولوگ 'start' یا 'end' پر سیٹ ہوا ہو وچا، اس کا اثر رکھتا ہے.

scroll-margin-block پراویژن اس پراویژنوآں کا چوتا پراویژن ہے:

scroll-margin-block پراویژن کا ولوگ مختلف طریقوآں سے سیٹ کیا جاسکتا ہے:

اگر scroll-margin-block پراویژن دو ولوگ وچا ھا:

scroll-margin-block: 10px 50px;
  • ਸ਼ੁਰੂ ਦੀ ਦੂਰੀ 10px ਹੈ
  • ਅੰਤ ਦੀ ਦੂਰੀ 50px ਹੈ

ਜੇਕਰ scroll-margin-block ਪ੍ਰਤੀਭੂਤੀ ਨੂੰ ਇੱਕ ਮੁੱਲ ਹੈ:

scroll-margin-block: 10px;
  • ਸ਼ੁਰੂ ਅਤੇ ਅੰਤ ਦੀ ਦੂਰੀ 10px ਹੈ

ਦੇਖਣ ਲਈ scroll-margin-block ਪ੍ਰਤੀਭੂਤੀ ਦੇ ਨਾਲ scroll-margin-block ਅਤੇ scroll-snap-align ਪ੍ਰਤੀਭੂਤੀ ਦੇ ਨਾਲ scroll-snap-type ਪ੍ਰਤੀਭੂਤੀ.

CSS ਦੇ scroll-margin-inline ਅਤੇ scroll-margin-block ਪ੍ਰਤੀਭੂਤੀ ਦੇ ਨਾਲ CSS scroll-margin-top کئیتیਅਤੇscroll-margin-bottomਅਤੇscroll-margin-left ਅਤੇ scroll-margin-right ਬਹੁਤ ਹੀ ਮਿਲਦੇ ਜੁਲਦੇ ਹਨ ਪਰ scroll-margin-block ਅਤੇ scroll-margin-inline ਪ੍ਰਤੀਭੂਤੀ ਬਲਤੀਰੀਕਸ ਅਤੇ ਸਰਕਲ ਦੀ ਬਲਤੀਰੀਕਸ ਉੱਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ。

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਸਟ੍ਰੀਮਿੰਗ ਦੀ ਬਲਤੀਰੀਕਸ ਵਿੱਚ ਬਲਤੀਰੀਕਸ ਦੀ ਸਥਿਤੀ ਨਾਲ ਦੂਰੀ ਸੈਟ ਕਰੋ:

div {
  scroll-margin-block: 10px;
}

ਖੁਦ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 2

ਜਦੋਂ ਉਪ ਬਣਾਣ ਦਾ writing-mode ਪ੍ਰਤੀਭੂਤੀ ਮੁੱਲ ਵਿੱਚ vertical-rl ਦੇ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰਨ ਤੇ ਇਲੈਕਟ੍ਰੌਨ ਬਣਾਣ ਦੀ ਬਲਤੀਰੀਕਸ ਵਿੱਚ ਪਹਿਲੀ ਸਥਿਤੀ ਉੱਪਰੋਕਤ ਹੋਵੇਗੀ ਅਤੇ ਅੰਤਿਮ ਸਥਿਤੀ ਵਿੱਚ ਵੱਲ ਹੋਵੇਗੀ।ਇਹ ਸਰਕਲ ਲੱਗਣ ਦਾ ਵਿਵਹਾਰ ਅਤੇ ਹੋਰ ਪ੍ਰਭਾਵ ਪਾਵੇਗਾ。 scroll-margin-block ਪ੍ਰਤੀਭੂਤੀ ਦਾ ਕਾਮਕਾਜ:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

ਖੁਦ ਕੋਸ਼ਿਸ਼ ਕਰੋ

CSS ਗਰੇਫਿਕਸ

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

ਪ੍ਰਤੀਭੂਤੀ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
0 ਮੂਲਤਵੀ
length

ਇਹ ਦੂਰੀ px, pt, cm ਆਦਿ ਦੇ ਇਕਾਈਆਂ ਨਾਲ ਸੈਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਦੀ ਸਹੂਲਤ ਹੈ。

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

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

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

ਸਾਰੇ ਨੰਬਰ ਇਹ ਸਟ੍ਰੀਮਿੰਗ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਦੇ ਪਹਿਲੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਵਾਲੇ ਹਨ.

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

ਸਬੰਧਤ ਪੰਨੇ

ਸਬੰਧਤ:CSS scroll-margin-block-end پراپرتی

ਸਬੰਧਤ:CSS scroll-margin-block-start پراپرتی

ਸਬੰਧਤ:CSS scroll-snap-align کئیتی

ਸਬੰਧਤ:CSS scroll-snap-type کئیتی

ਸਬੰਧਤ:CSS writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ