CSS scroll-padding-left गुण

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

scroll-padding-left विशेषता के द्वारा कंटेनर के बाईं पास से उप-एलिमेंट के आधार स्थान तक की दूरी निर्धारित करती है।

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

आधार स्थान द्वारा निर्धारित है। scroll-snap-align प्रभाव पड़ सकता है, लेकिन यह CSS विशेषता के दिशा और writing-mode प्रभाव का।

ध्यान दें:यह विशेषता केवल जब आधार स्थान उप-एलिमेंट के बाईं पास पर सेट किया गया है तभी वैध है।

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

उदाहरण

उदाहरण 1

स्क्रॉल इन्दिरा को डिक्टर के बाईं पास से स्थानांकन तक 20px के रूप में सेट करें:

डिव {
  scroll-padding-left: 20px;
}

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

उदाहरण 2: इमेज लाइब्रेरी

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

#container > img {
  scroll-padding-left: 30px;
}

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

उदाहरण 3: बाईं पास पर स्क्रॉल इन्दिरा निर्धारित करें

दोनों दिशाओं पर स्थानांकन व्यवहार निर्धारित होने तो, इसके अलावा, डिक्टर में भी scroll-padding-left गुण को स्थान की चोटी पर सेट करें। अगले एलीमेंट को लेकर स्थाना को देखें:

#container > div {
  scroll-padding-left: 30px;
}

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

उदाहरण 4: स्थान की चोटी

को दिखाने के लिए scroll-padding-left गुण अभी तक प्रभावी है, स्थान को उसके उप-एलीमेंट के बाईं पास पर सेट करना चाहिए। इस उदाहरण मेंदिशा गुण के मूल्य 'राहत दायाँ' को स्थान को उसके उप-एलीमेंट के बाईं पास से दायाँ पास कर देगा।ऐसे कोड का इस्तेमाल करते हुएscroll-padding-left गुण के प्रभाव अब नहीं होगा:

#container {
  दिशा: राहत दायाँ;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: नहीं शुरू;
}

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

सीएसएस व्याकरण

scroll-padding-left: ऑटो|मूल्य|इनिशियल|इनहेरिट;

गुण मूल्य

मूल्य वर्णन
ऑटो डिफ़ॉल्ट मूल्य। ब्राउज़र इस इन्दिरा को गणना करेगा।
लैंग्थ

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

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

तकनीकी विवरण

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

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

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

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

相关页面

संदर्भ:CSS दिशा गुण

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

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

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