CSS scroll-padding-block-end गुण

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

scroll-padding-block-end गुण ब्लॉक दिशा पर, कंटेनर के अंत से सही पड़ताल के स्थान तक की दूरी को निर्दिष्ट करता है。

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

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

यह निर्धारित करता है।

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

गुण को 'end' पर निर्धारित करने पर ही काम करता है。 scroll-padding-block-end गुण के प्रभाव को देखने के लिए scroll-snap-align गुण को अपने पितृ तत्व पर निर्धारित करें scroll-padding-block-end और scroll-snap-type गुण

उदाहरण

उदाहरण 1

कंटेनर के अंतिम छोर से लटकने के स्थान तक ब्लॉक दिशा के आंतरिक गाप को 20px निर्धारित करें:

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

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

उदाहरण 2: चित्र ग्राहक

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

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

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

उदाहरण 3

जब कंटेनर तत्व के writing-mode गुण को vertical-rl पर निर्धारित करने पर ब्लॉक दिशा के तत्व के अंतिम छोर और पुत्र तत्व नीचे से बाईं ओर की ओर जाते हैं। यह स्क्रॉल लटकने के व्यवहार को प्रभावित करता है और scroll-padding-block-end गुण के काम करने के तरीका:

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

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

CSS व्याकरण

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

गुण मान

तकनीकी विवरण

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

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

相关页面

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

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

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