CSS scroll-padding-inline-start गुण

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

scroll-padding-inline-start गुण रेखीय दिशा में कंटेनर के आरंभ स्थान से उप-एलिमेंट के ग्रहण स्थान तक की दूरी निर्दिष्ट करता है。

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

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

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

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

देखना चाहिए scroll-padding-inline-start गुण के प्रभाव को देखने के लिए, उप-एलिमेंट पर इसे सेट करना आवश्यक है scroll-snap-align गुण, और पैरंट एलिमेंट पर इसे सेट करें scroll-padding-inline-start और scroll-snap-type गुण

उदाहरण

उदाहरण 1

कंटेनर के शुरूआती स्थान से अटैच स्थान तक इंटरनल दिशा में स्क्रॉल इंटरलाइन पैडिंग को 20px सेट करें:

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

अपने आप साफ़ी करें

उदाहरण 2: फोटो लाइब्रेरी

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

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

अपने आप साफ़ी करें

उदाहरण 3

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

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

अपने आप साफ़ी करें

उदाहरण 4

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

#container {
  scroll-padding-inline-start: 20px;
  दिशा: राल्ट;
}

अपने आप साफ़ी करें

CSS व्याकरण

scroll-padding-inline-start: ऑटो|मूल्य|इनिशियल|इनहेरिट;

गुण मूल्य

मूल्य वर्णन
ऑटो मूलभूत मूल्य। ब्राउज़र इस इंटरलाइन पैडिंग की गणना करता है。
लैंग्थ

px, pt, cm आदि इकाइयों में scroll-padding-inline-start निर्दिष्ट करें。

नकारात्मक मूल्य नहीं इस्तेमाल की जा सकती है। देखें:सीएसएस इकाई।
% अंतर्निर्देशक विस्तार को इंटरनल विस्तार के प्रतिशत के रूप में निर्दिष्ट करें。
इनिशियल इस गुण को उसके मूलभूत मूल्य पर सेट करें। देखें इनिशियल।
इनहेरिट अपने पितृ एलीमेंट से इस गुण को इनहेरिट करें। देखें इनहेरिट।

तकनीकी विवरण

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

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

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

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

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

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

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

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

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