CSS scroll-padding-inline-end गुण

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

scroll-padding-inline-end गुण को कंटेनर के अंत से सबसे निचले एलिमेंट के समायोजित स्थान तक इनलाइन दिशा में दूरी निर्दिष्ट करता है।

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

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

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

ध्यान दें:यह गुण केवल scroll-snap-align प्रयोग करने के लिए 'end' दिशा में प्रतियोगिता सेट करना चाहिए।

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

उदाहरण

उदाहरण 1

कंटेनर के अंत से जुड़े इनलाइन दिशा में स्क्रॉल इनर पैडिंग को 20px सेट करें:

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

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

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

scroll-padding-inline-end गुण को जोड़ी गई गैलरी में इस्तेमाल किया जा सकता है, ताकि चित्रों को नियत एलीमेंट से बाहर निकाला जा सके:

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

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

उदाहरण 3

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

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

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

उदाहरण 4

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

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

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

CSS व्याकरण

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

गुण मान

तकनीकी विवरण

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

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

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

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

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

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

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