स्क्रॉल-पैडिंग - सीएसएस-ट्रिक्स

scroll-paddingCSS स्क्रॉल स्नैप मॉड्यूल का हिस्सा है। स्क्रॉल स्नपिंग का तात्पर्य विंडो पर (या स्क्रॉल करने योग्य कंटेनर) पृष्ठ पर विशिष्ट तत्वों के लिए व्यूपोर्ट की स्थिति को "लॉक करना" है। स्क्रॉल-स्नपिंग कंटेनर के बारे में सोचें जैसे कि किसी तत्व के ऊपर एक चुंबक लगाना जो व्यूपोर्ट के शीर्ष पर चिपक जाता है और पेज को वहीं स्क्रॉल करने से रोकने के लिए मजबूर करता है।

scroll-paddingकिसी भी स्क्रॉल-स्नैपिंग कंटेनर के लिए एक वैकल्पिक संपत्ति है। जब भी scroll-snap-typeसंपत्ति को किसी भी मूल्य पर सेट किया जाता है , तब स्क्रॉल-स्नैपिंग कंटेनर परिभाषित किए जाते हैं none। स्क्रॉल-स्नपिंग कंटेनरों के बारे में अधिक जानकारी के लिए scroll-snap-typeपंचांग प्रविष्टि देखें ।

ठीक है, इसलिए स्क्रॉल-पैडिंग पर जाना

scroll-paddingतड़क-भड़क वाले कंटेनर के इष्टतम देखने के क्षेत्र को समायोजित करने के लिए उपयोग किया जाता है। यह तब उपयोगी होता है जब कंटेनर में एक निश्चित हेडर जैसे तत्व होते हैं जो अंदर तत्वों को अस्पष्ट करते हैं या यदि स्क्रॉल करने योग्य कंटेनर को आंतरिक तत्वों को कमरे में सांस लेने के लिए कुछ स्थान की आवश्यकता होती है, तो वे "स्निप्ड" हो जाते हैं।

एक सरल उदाहरण कंटेनर के शीर्ष और बाईं ओर scroll-paddingकुछ निश्चित रिक्ति बनाने के लिए उपयोग किया जाएगा 50px:

.scroll-container ( scroll-padding: 50px 0 0 50px; )

वाक्य - विन्यास

/* Shorthand */ scroll-padding: ( | auto )(1,4); /* Longhands */ scroll-padding-top: | auto; scroll-padding-right: | auto; scroll-padding-bottom: | auto; scroll-padding-left: | auto; /* inline-specific and block-specific properties as well */ scroll-padding-block: ( | auto )(1,2); scroll-padding-inline: ( | auto )(1,2);

लॉन्गहैंड्स पर महत्वपूर्ण नोट: क्रोम वर्तमान में लॉन्गहैंड-प्रारूप scroll-paddingऔर scroll-marginगुणों का समर्थन नहीं करता है । अधिकतम ब्राउज़र समर्थन के लिए आशुलिपि का उपयोग करें। अधिक विवरण और वर्तमान स्थिति के लिए क्रोमियम बग ट्रैकर पर इस मुद्दे को देखें।

मूल्यों

scroll-padding निम्नलिखित मूल्यों को स्वीकार करता है:

• autoब्राउज़र / उपयोगकर्ता-एजेंट द्वारा निर्धारित किए जाने वाले पैडिंग को छोड़ देता है। आमतौर पर, इसका अर्थ है 0px का मान, लेकिन गैर-शून्य हो सकता है यदि उपयोगकर्ता-एजेंट एक और मूल्य तय करता है तो अधिक उपयुक्त है।
• इसी तरह करने के लिए लिखा है paddingऔर अन्य गुण जहां मूल्य इकाइयों के साथ परिभाषित किया जा सकता ( px, em, vh, आदि) या कंटेनर खुद के प्रतिशत के रूप।

उदाहरण

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन स्क्रॉल-पेडिंग उदाहरण देखें ।

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

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
69. है	६ 68	1 1*	। ९	1 1

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	11.0-11.2

सम्बंधित

• scroll-snap-type
• scroll-margin
• scroll-snap-align
• scroll-snap-stop

साधन

• सीएसएस स्क्रॉल स्नैप डब्ल्यू 3 सी उम्मीदवार की सिफारिश
• प्रैक्टिकल सीएसएस स्क्रॉल तड़क
• पेश है CSS स्क्रॉल स्नैप पॉइंट