CSS स्क्रॉल-मार्जिन-ब्लॉक गुण

परिभाषा और उपयोग

scroll-margin-block गुण ब्लॉक दिशा में स्नैप स्थान (स्नैप पोजीशन) और कंटेनर के बीच की दूरी को निर्दिष्ट करता है。

इसका अर्थ है कि जब आप स्क्रॉल को रोकते हैं तो स्क्रॉल तेजी से समायोजित होता है और ब्लॉक दिशा पर स्नैप स्थान और कंटेनर के बीच की निर्दिष्ट दूरी पर रुक जाता है。

ब्लॉक दिशा का अर्थ है निम्नलिखित पाठ के अनुसार अगले पाठ को जहां रखा जाएगा, यह भी ऐसे टैग (जैसे <p> और <div> टैग) के CSS display: block; जैसे लेबल पर पृष्ठ पर व्यवस्था है, जो ब्लॉक दिशा के बारे में भी निर्धारित करता है। ब्लॉक दिशा लिखने की भाषा पर निर्भर करती है, जैसे, मंगोलियन के नए पाठ के अक्षर बाईं से दाईं ओर लिखे जाते हैं, इसलिए ब्लॉक दिशा भी बाईं से दाईं ओर होती है, जबकि अंग्रेजी पृष्ठ की ब्लॉक दिशा नीचे की ओर होती है। ब्लॉक दिशा CSS गुण के द्वारा परिभाषित की जा सकती है: writing-mode से परिभाषित किया जाता है。

स्नैप स्थान का अर्थ है जब आप स्क्रॉल को रोकते हैं तो सबदों के अंदर बच्चा एलेमेंट का स्थान कैसे स्नैप होता है।

ध्यान दें:यह गुण केवल ब्लॉक दिशा में प्रयोग किया जाता है。 और गुण '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-snap-align scroll-margin-block और और गुण 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 स्क्रॉल-मार्जिन-ब्लॉक-एंड गुण

संदर्भ：CSS स्क्रॉल-मार्जिन-ब्लॉक-स्टार्ट गुण

संदर्भ：CSS scroll-snap-align गुण

संदर्भ：CSS scroll-snap-type गुण

संदर्भ：CSS राइटिंग-मोड प्रतियोगिता