CSS scroll-padding-top गुण

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

scroll-padding-top इस अभियान का विवरण देता है कि कंटेनर के ऊपर से उप-एलिमेंट के स्थिति तक की दूरी।

स्थिति जिसमें रोलिंग रुकने पर, उप-एलिमेंट कंटेनर में स्थित होता है।

स्नैप स्थान द्वारा scroll-snap-align गुण के सेट करने के द्वारा भी प्राप्त हो सकता है direction और writing-mode के प्रभाव

ध्यान देंःइस गुण को स्नैप स्थान को एलिमेंट के उच्च पास पर सेट करने पर ही प्रभावी है।

देखना scroll-padding-top गुण को अपने पितृ एलिमेंट पर सेट करें scroll-snap-align गुण के प्रभाव को देखने के लिए scroll-padding-top और scroll-snap-type गुण

उदाहरण

उदाहरण 1

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

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

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

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

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

#container {
  scroll-padding-top: 30px;
}

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

उदाहरण 3: शीर्ष पर स्क्रॉल आइनिंग

दोनों दिशाओं में स्नैप व्यवहार सेट करे गए होने के कारण, इसके अलावा, कंटेनर पर भी सेट किया जा सकता है scroll-padding-top गुण को विराली गई एलिमेंट के लिए उच्चांग गली के रूप में देखेंः

#container {
  scroll-padding-top: 30px;
}

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

उदाहरण 4: स्नैप स्थान

इसे देखने के लिए scroll-padding-top गुण को सक्रिय करने के लिए आगे के एलिमेंट के उच्च पास पर सेट करना आवश्यक है। इस उदाहरण मेंःwriting-mode गुण को आगे के एलिमेंट के उच्च पास से लेकर दायाँ पास पर सेट करता है।इस तरह के कोड का इस्तेमाल करते हुएःscroll-padding-top इस गुण का प्रभाव नहीं होगा:

#container {
  writing-mode: वर्गीय-बाईं-दाईं;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: स्टार्ट नोने;
}

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

सीएसएस ग्रामर

scroll-padding-top: ऑटो|मान|इनिशियल|विरासत|;

गुण मान

मान वर्णन
ऑटो मूलभूत मान
लंबाई

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

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

तकनीकी विवरण

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

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

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

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

संबंधित पृष्ठ

संदर्भ：CSS direction गुण

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

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

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