CSS स्क्रोल-पैडिंग-बॉटम प्रभाव

定义和用法

scroll-padding-bottom 属性指定从容器底部到子元素吸附位置的距离。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。吸附位置通过 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction और writing-mode 的影响。

注意：ध्यान दें:

यह गुण केवल जब गोताखोरी स्थान को उसके उप-एलीमेंट के नीचे सेट किया जाए तभी प्रभावी होता है。 scroll-padding-bottom गुण के प्रभाव को देखने के लिए scroll-snap-align गुण को पैरंट एलीमेंट पर सेट करें scroll-padding-bottom और scroll-snap-type गुण

उदाहरण

उदाहरण 1

इस गुण को देखने के लिए, कंटेनर से नीचे गोताखोरी स्थान तक की रोल पैडिंग को 20px के रूप में सेट करें:

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

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

उदाहरण 2: चित्र गैलरी

गोताखोरी व्यवहार वाले चित्र गैलरी में, इस्तेमाल कर सकते हैं: scroll-padding-bottom गुण को चित्र को नियत एलीमेंट के ऊपर की ओर धकेल देता है:

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

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

उदाहरण 3: नीचे से रोल पैडिंग सेट करना

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

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

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

उदाहरण 4: गोताखोरी स्थान

यह देखने के लिए scroll-padding-bottom गुण असरीदार होता है, गोताखोरी स्थान को उसके उप-एलीमेंट के नीचे सेट करना चाहिए।इस उदाहरण मेंwriting-mode गुण को गोताखोरी स्थान को उसके उप-एलीमेंट के नीचे से बदलकर बाईं तरफ से ले जाता है।इस तरह के कोड का इस्तेमाल करते हुएscroll-padding-bottom इस गुण को अब नहीं असर करेगा:

#container {
  writing-mode: vertical-rl;
  scroll-padding-bottom: 30px;
}
#container > div {
  scroll-snap-align: end none;
}

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

CSS व्याकरण

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

गुण मान

तकनीकी विवरण

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

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

相关页面

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

संदर्भ:CSS स्क्रोल-स्नैप-एलाइन प्रभाव

संदर्भ:CSS स्क्रोल-स्नैप-टाइप प्रभाव

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