CSS स्क्रोल-पैडिंग प्रॉपर्टी
- पिछला पृष्ठ scroll-margin-top
- अगला पृष्ठ scroll-padding-block
वर्णन और उपयोग
scroll-padding विशेषता इसके भीतर सही विभाग के आकर्षण स्थान से की दूरी को निर्दिष्ट करती है。
इसका अर्थ है, जब आप संचार करना बंद करते हैं, तो संचार तेजी से समायोजित होता है और फोकस विभाग के आकर्षण स्थान से निर्दिष्ट दूरी पर रुक जाता है。
आकर्षण स्थान यह होता है कि जब संचार करना बंद हो जाता है, तो सही विभाग इसके भीतर स्थिर स्थान पर ले जाया जाता है。
scroll-padding विशेषता निम्नलिखित विशेषताओं की संक्षिप्त विशेषता है:
scroll-padding विशेषता के मूल्य को अलग-अलग तरीके से सेट किया जा सकता है:
यदि scroll-padding विशेषता की चार मूल्य हैं:
scroll-padding: 15px 30px 60px 90px;
- शीर्ष की दूरी 15px है
- दाएँ की दूरी 30px है
- नीचे की दूरी 60px है
- बाएँ की दूरी 90px है
यदि scroll-padding विशेषता की तीन मूल्य हैं:
scroll-padding: 15px 30px 60px;
- शीर्ष की दूरी 15px है
- बाएँ और दायाँ दूरी 30px
- नीचे की दूरी 60px है
यदि scroll-padding विशेषता की दो मूल्य हैं:
scroll-padding: 15px 30px;
- शीर्ष और नीचे की दूरी 15px है
- बाएँ और दायाँ दूरी 30px
यदि scroll-padding गुण को एक मूल्य है:
scroll-padding: 10px;
- सभी चार दिशाओं की दूरी 10px है
सेट करें scroll-padding गुण के प्रभाव को देखने के लिए scroll-snap-align गुण, और माता एलीमेंट पर scroll-padding और scroll-snap-type गुण
ध्यान दें:नीचे के उदाहरण में, सभी ओर की स्क्रॉल गोलाई को सेट किया गया है, लेकिन scroll-snap-align "start" को सेट किया गया है, इसलिए केवल ऊपरी ओर की स्क्रॉल गोलाई को स्क्रॉल व्यवहार बदला है。
उदाहरण
उदाहरण 1
कंटेनर से लगाव स्थिति तक की स्क्रॉल गोलाई को 20px सेट करें:
div {
scroll-padding: 20px;
}
उदाहरण 2: चित्र दीर्घा
scroll-padding गुण को जिसका लगाव व्यवहार है वाले चित्र दीर्घा में उपयोग किया जा सकता है, ताकि चित्र को स्थिर तत्व के नीचे धकेल दिया जा सके:
#container {
scroll-padding: 30px 0 0 0;
}
उदाहरण 3: नीचे और दायाँ ओर के लिए स्क्रॉल गोलाई को सेट करें
scroll-padding गुण को कंटेनर के नीचे और दायाँ ओर साथ-साथ सेट किया जा सकता है। स्थिति को देखने के लिए अनुक्रमित रूप से आगे और ऊपर की ओर स्क्रॉल करें:
#container {
scroll-padding: 0 10px 30px 0;
}
CSS व्याकरण
scroll-padding: auto|value|initial|inherit;
गुण मूल्य
| मूल्य | वर्णन |
|---|---|
| auto | डिफ़ॉल्ट मूल्य। ब्राउज़र गोलाई की गणना करता है |
| length |
px, pt, cm आदि इकाइयों में गोलाई को निर्दिष्ट करें नकारात्मक मूल्यों का उपयोग नहीं किया जा सकता। देखें:सीएसएस इकाई। |
| % | आवर्ती तत्व के व्यास के प्रतिशत में आवर्ती चयन की गोलाई को निर्दिष्ट करें |
| initial | इस गुण को इसके डिफ़ॉल्ट मूल्य पर सेट करें। देखें initial। |
| inherit | इस गुण को उसके माता एलीमेंट से विरासत में ले लें। देखें inherit। |
तकनीकी विवरण
| डिफ़ॉल्ट मूल्य: | auto |
|---|---|
| विरासतीयता: | नहीं |
| एनिमेशन निर्माण: | समर्थन नहीं है। देखें:एनिमेशन संबंधी गुण। |
| संस्करण: | CSS3 |
| JavaScript व्याकरण: | object.style.scrollPadding="20px" |
ब्राउज़र समर्थन
तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण के रूप में प्रदर्शित हैं।
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
संबंधित पृष्ठ
संदर्भ:CSS स्क्रोल-पैडिंग-बॉटम प्रॉपर्टी
संदर्भ:CSS स्क्रोल-पैडिंग-लेफ्ट प्रॉपर्टी
संदर्भ:CSS स्क्रोल-पैडिंग-राइट प्रॉपर्टी
संदर्भ:CSS स्क्रोल-पैडिंग-टॉप प्रॉपर्टी
- पिछला पृष्ठ scroll-margin-top
- अगला पृष्ठ scroll-padding-block
