CSS scroll-padding-block गुण

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

scroll-padding-block एट्रिब्यूट कंटेनर से उप-एलिमेंट के ग्रहण स्थान तक ब्लॉक दिशा में की दूरी निर्दिष्ट करता है

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

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

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

ध्यान दें:यह एट्रिब्यूट केवल ब्लॉक दिशा में ही उपयोगी हैऔर उसके पिता एलेमेंट पर सेट करें एट्रिब्यूट 'start' या 'end' पर सेट होने पर प्रभावी होता है。

scroll-padding-block एट्रिब्यूट निम्नलिखित एट्रिब्यूट का शॉर्टकट है:

scroll-padding-block एट्रिब्यूट की वैल्यू को विभिन्न तरीकों से सेट किया जा सकता है:

यदि scroll-padding-block एट्रिब्यूट की दो वैल्यू है:

scroll-padding-block: 10px 50px;
  • शुरूआती की दूरी 10px है
  • समाप्ती की दूरी 50px है

यदि scroll-padding-block एट्रिब्यूट की एक वैल्यू है:

scroll-padding-block: 10px;
  • शुरूआती और समाप्ती के बीच की दूरी 10px है

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

CSS के scroll-padding-block और scroll-padding-inline गुण CSS scroll-padding-top गुणऔरscroll-padding-bottomऔरscroll-padding-left और scroll-padding-right बहुत अधिक लगता है, लेकिन scroll-padding-block और scroll-padding-inline गुण ब्लॉक दिशा और इनलाइन दिशा पर निर्भर करता है。

उदाहरण

उदाहरण 1

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

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

स्वयं अभिप्राय करें

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

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

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

स्वयं अभिप्राय करें

उदाहरण 3

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

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

स्वयं अभिप्राय करें

CSS व्याकरण

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

गुण मूल्य

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

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

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

तकनीकी विवरण

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

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

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

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

56.0

संबंधित पृष्ठCSS scroll-padding-block-end गुण

संबंधित पृष्ठCSS scroll-padding-block-start गुण

संबंधित पृष्ठCSS scroll-snap-align गुण

संबंधित पृष्ठCSS scroll-snap-type गुण

संबंधित पृष्ठCSS रिटिंग-मोड प्रभाव