CSS scroll-padding-block-start गुण

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

scroll-padding-block-start गुण को ब्लॉक दिशा पर, कंटेनर के आरंभिक स्थान से सही एलीमेंट के आसीन स्थान तक की दूरी निर्दिष्ट करता है。

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

ब्लॉक दिशा वर्तमान पंक्ति के तुल्यांतर में स्थित है, अगली पंक्ति को रखने की दिशा है। यह भी CSS display: block; के टैग (जैसे <p> और <div> टैग) के पृष्ठ पर बैठकी विधि है। ब्लॉक दिशा लिखने की भाषा पर निर्भर करती है, उदाहरण के लिए, मंगोलियन के नए पंक्ति से बाईं तरफ बढ़ते हैं, इसलिए ब्लॉक दिशा बाईं तरफ से दाईं तरफ है, जबकि अंग्रेजी पृष्ठ की ब्लॉक दिशा नीचे है। ब्लॉक दिशा CSS गुण के द्वारा निर्धारित की जा सकती है, writing-mode सेट करें।

स्क्रॉल स्थान को यह निर्दिष्ट करने के लिए इस्तेमाल किया जाता है। जब आप स्क्रॉल को रुका देते हैं तो उप-एलीमेंट कंटेनर में इस स्थान पर आकर बंधे रहते हैं।

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

देखने के लिए scroll-padding-block-start गुण को scroll-snap-align गुण को scroll-padding-block-start और scroll-snap-type गुण

उदाहरण

उदाहरण 1

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

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

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

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

स्क्रॉल एड्स व्यवहार वाले चित्र गैलरी में scroll-padding-block-start गुण चित्र को नियत एलीमेंट के नीचे ले जाता है:

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

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

उदाहरण 3

जब कंटेनर एलीमेंट के writing-mode गुण को vertical-rl पर सेट करने पर ब्लॉक दिशा में कंटेनर की शुरुआती स्थिति और उप-एलीमेंट शीर्ष से दाएं तरफ जाते हैं। यह स्क्रॉल एड्स व्यवहार और scroll-padding-block-start गुण का काम करने का तरीका:

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

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

CSS व्याकरण

scroll-padding-block-start: auto|value|initial|inherit;

गुण मूल्य

मूल्य वर्णन
auto डिफ़ॉल्ट मूल्य। ब्राउज़र अंदरीन पैडिंग की गणना करता है।
length

scroll-padding-block-start का मूल्य निर्दिष्ट करें। इकाई के रूप में px, pt, cm आदि इस्तेमाल करें。

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

तकनीकी विवरण

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 15.0 56.0

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

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

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

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