CSS स्क्रोल-मार्जिन-इनलाइन-स्टार्ट एट्रिब्यूट

वर्णन और उपयोग

scroll-margin-inline-start इस एट्रिब्यूट द्वारा इनलाइन दिशा में, लटकने की स्थान और कंटेनर के बीच की दूरी निर्दिष्ट की जाती है。

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

इनलाइन दिशा यह है कि अगला अक्षर वर्तमान अक्षर के बाद इनलाइन में कहाँ रखा जाएगा, यह इसलिए भी है कि जो टैग इसके साथ दिखाई देते हैं (जैसे <a> और <strong> टैग) इनलाइन में टेक्स्ट के विन्यास तरीका है। इनलाइन दिशा लिखने भाषा पर निर्भर करती है, जैसे कि अरबी नए अक्षर दांए से बाईं तरफ लिखे जाते हैं, इसलिए इनलाइन दिशा दांए से बाईं तरफ है, जबकि अंग्रेजी पृष्ठ की इनलाइन दिशा बाईं तरफ से दांए तरफ है। इनलाइन दिशा को CSS एट्रिब्यूट के द्वारा परिवर्तित किया जा सकता है, जैसे direction और writing-mode अर्थात्

लगाने के स्थान इस रूप में परिभाषित है कि जब आप स्क्रॉल को रुकावट करें तो, उपांगुणीय एलिमेंट का आपके कंटेनर में लगाने के स्थान पर आगे बढ़ना होगा。

ध्यान दें:यह गुण scroll-snap-align गुण को इनलाइन दिशा को 'start' के रूप में सेट किया जाए तभी कार्य करता है।

CSS के scroll-margin-inline और scroll-margin-block गुण CSS स्क्रोल-मार्जिन-टॉप एट्रिब्यूटऔरscroll-margin-bottomऔरscroll-margin-left और scroll-margin-right बहुत अधिक उसी से मिलता-जुलता है, लेकिन scroll-margin-block और scroll-margin-inline गुण ब्लॉक दिशा और इनलाइन दिशा पर निर्भर करता है。

उदाहरण

उदाहरण 1

इनलाइन दिशा में, लगाने के स्थान से गतिशील कंटेनर तक की दूरी सेट करें:

div {
  scroll-margin-inline-start: 20px;
}

स्वयं प्रयोग करें

उदाहरण 2

जब <div> एलिमेंट का writing-mode गुण मूल्य वर्टिकल-rl में सेट किया गया है तो, इनलाइन दिशा नीचे की ओर होगी। परिणामस्वरूप एलिमेंट का प्रारंभिक स्थान बाईं ओर से शीर्ष की ओर जाना होगा:

div {
  scroll-margin-inline-start: 20px;
  writing-mode: vertical-rl;
}

स्वयं प्रयोग करें

उदाहरण 3

जब <div> एलिमेंट का direction गुण मूल्य रेटील (rtl) में सेट किया गया है तो, इनलाइन दिशा दायां से बाईं ओर की ओर होगी। परिणामस्वरूप एलिमेंट का प्रारंभिक स्थान बाईं ओर से (आधिकारिक दिशा के लिए, वास्तव में दायां से शुरू होगा, लेकिन यहाँ का 'बाईं ओर' आधिकारिक दिशा (ltr) की बाईं ओर को निर्दिष्ट करता है) समायोजित करना होगा:

div {
  scroll-margin-inline-start: 20px;
  direction: rtl;
}

स्वयं प्रयोग करें

CSS व्याकरण

inset-inline-start: 0|value|initial|inherit;

गुण मूल्य

मूल्य वर्णन
0 मूलभूत
length

पिक्सेल (px), प्याक्स (pt), सेंटीमीटर (cm) आदि इकाइयों से दूरी निर्दिष्ट करने के लिए स्पष्ट किया गया है। नकारात्मक मूल्य भी अनुमति दिया गया है।

देखें:सीएसएस इकाई।
initial इस गुण को उसके मूलभूत मूल्य पर सेट करें। देखें initial।
inherit अपने पितृ एलिमेंट से इस गुण को विरासत करें। देखें inherit।

तकनीकी विवरण

मूलभूत मूल्य: 0
विरासत की क्षमता: नहीं
एनिमेशन निर्माण: समर्थित नहीं है। देखें:एनिमेशन संबंधी गुण।
संस्करण: CSS3
जेसक्रिप्ट व्याकरण: object.style.scrollMarginInlineStart="30px"

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

क्रोम एज फायरफॉक्स सफारी ऑपेरा
69.0 79.0 68.0 14.1 56.0

संबंधित पृष्ठ

संदर्भ：CSS direction गुण

संदर्भ：CSS स्क्रोल-स्नैप-एलाइन एट्रिब्यूट

संदर्भ：CSS स्क्रोल-स्नैप-टाइप एट्रिब्यूट

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