CSS स्क्रॉल-मार्जिन-इनलाइन प्रतियोगिता

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

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

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

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

ग्रहण स्थान का अर्थ है कि उप-एलिमेंट स्टॉप करने पर कंटेनर में आकर्षित होने वाला स्थान है。

scroll-margin-inline एट्रिब्यूट निम्नलिखित एट्रिब्यूट का लघुरूप है:

scroll-margin-inline एट्रिब्यूट की मान को विभिन्न तरीकों से सेट किया जा सकता है:

यदि scroll-margin-inline एट्रिब्यूट की दो मान है:

scroll-margin-inline: 20px 70px;
  • शुरूआती की दूरी 20px है
  • समाप्ती की दूरी 70px है

यदि scroll-margin-inline एट्रिब्यूट की एक मान है:

scroll-margin-inline: 20px;
  • शुरूआती और समाप्ती की दूरी 20px है

देखने के लिए scroll-margin-inline प्रभाव का प्रयोग, उप-एलिमेंट पर सेट करना होगा scroll-margin-inline और scroll-snap-align गुण को, और पिता एलेमेंट पर सेट करें scroll-snap-type गुण

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: 20px;
}

अपने आप प्रयोग करें

उदाहरण 2

जब <div> एलेमेंट का writing-mode गुण का मूल्य vertical-rl तब तब रिल दिशा से नीचे जाती है।परिणामस्वरूप एलेमेंट का प्रारंभ से बाईं ओर और अंत से दायां ओर जाता है।यह इस पर भी प्रभाव डालता है scroll-margin-inline गुण:

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

अपने आप प्रयोग करें

उदाहरण 3

जब <div> एलेमेंट का direction गुण का मूल्य रिल तब तब रिल दिशा से दायां बाईं ओर जाती है।परिणामस्वरूप एलेमेंट का प्रारंभ से बाईं ओर और अंत से दायां ओर जाता है।यह इस पर भी प्रभाव डालता है scroll-margin-inline गुण:

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

अपने आप प्रयोग करें

CSS व्याकरण

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

गुण मूल्य

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

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

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

तकनीकी विवरण

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

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

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

संदर्भ:CSS स्क्रॉल-मार्जिन-इनलाइन-एंड प्रतियोगिता

संदर्भ:CSS स्क्रॉल-मार्जिन-इनलाइन-स्टार्ट प्रतियोगिता

संदर्भ:CSS स्क्रॉल-स्नैप-एलाइन प्रतियोगिता

संदर्भ:CSS स्क्रॉल-स्नैप-टाइप प्रतियोगिता

संदर्भ:CSS राइटिंग-मोड एट्रिब्यूट