CSS स्क्रॉल-पैडिंग-इनलाइन प्रतियोगिता

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

scroll-padding-inline गुण को दिशा में, कंटेनर से उपांशी एलिमेंट के जगह तक की दूरी निर्धारित करता है。

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

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

जल्दी स्थान यह होता है जब आप स्क्रॉल को रुकावट देते हैं, तो उपांशी एलिमेंट कंटेनर में जगह लेता है।

ध्यान:यह गुण केवल दिशा में ही उपयोगी हैscroll-snap-align गुण को 'start' या 'end' में सेट करने पर ही प्रभावी होता है。

scroll-padding-inline गुण निम्नलिखित गुणों का छोटा नाम है:

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline गुण के मान को विभिन्न तरीकों से सेट किया जा सकता है:

यदि scroll-padding-inline गुण की दो मांग है:

scroll-padding-inline: 10px 50px;

• शुरूआती स्थान की दूरी 10px है
• समाप्ती स्थान की दूरी 50px है

यदि scroll-padding-inline गुण की एक मांग है:

scroll-padding-inline: 10px;

• शुरूआती और समाप्ती स्थान की दूरी 10px है

देखना होगा scroll-padding-inline गुण के प्रभाव को देखने के लिए, उपांशी एलिमेंट पर निर्धारित करना चाहिए scroll-snap-align गुण को, और मात्रा एलिमेंट पर scroll-padding-inline और scroll-snap-type गुण。

CSS का scroll-padding-block और scroll-padding-inline गुण और CSS गुण CSS स्क्रॉल-पैडिंग-टॉप प्रतियोगिता、scroll-padding-bottom、scroll-padding-left और scroll-padding-right बहुत अधिक समान है, लेकिन scroll-padding-block और scroll-padding-inline गुण ब्लॉक दिशा और आन्तरिक दिशा पर निर्भर करता है。

उदाहरण

उदाहरण 1

आन्तरिक दिशा के बाहरी गाप को 20px के रूप में सेट करें:

div {
  scroll-padding-inline: 20px;
}

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

उदाहरण 2: चित्र लाइब्रेरी

स्क्रॉल अटैच के व्यवहार वाले चित्र गैलरी में, scroll-padding-inline गुण चित्र को नियत एलिमेंट के पीछे से बाहर निकालता है:

#container {
  scroll-padding-inline: 30px 0;
}

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

उदाहरण 3

जब कंटेनर एलिमेंट का writing-mode गुण का मान 'vertical-rl' पर सेट करने पर, आन्तरिक दिशा के बाहरी एलिमेंट और उसके उप-एलिमेंटों की शुरूआती स्थिति बाएँ ओर से ऊपर तक और अंतिम स्थिति दायाँ ओर से नीचे तक बदल जाती है। यह स्क्रॉल अटैच के व्यवहार और scroll-padding-inline गुण के काम के तरीका:

#container {
  scroll-padding-inline: 20px 0;
  writing-mode: vertical-rl;
}

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

उदाहरण 4

जब कंटेनर एलिमेंट का direction गुण का मान 'rtl' पर सेट करने पर, आन्तरिक दिशा के बाहरी एलिमेंट और उसके उप-एलिमेंटों की शुरूआती स्थिति दायाँ ओर से बाईं ओर तक बदल जाती है। यह स्क्रॉल अटैच के व्यवहार और scroll-padding-inline गुण के काम के तरीका:

#container {
  scroll-padding-inline: 20px 0;
  direction: rtl;
}

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

CSS व्याकरण

scroll-padding-inline: auto|value|initial|inherit;

गुण मान

तकनीकी विवरण

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

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

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

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

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

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

संदर्भ:CSS वरिंग-मोड प्रतियोगिता