The Scroll Padding bottom is an inbuilt property in Scroll Snap module. This property set the scroll padding longhand. This property acts as a magnet on the top of the sliding element that stick to the top of the view-port and stop the scrolling(forcefully) in that place. The Scroll Padding property is optional, this property is used when the Scroll Snap type property is set to none.
Syntax:
scroll-padding-bottom: [ length percentage | auto ]
Property Values: This property accept two property mentioned above and described below:
- length-percentage: This property works same as other padding property contains the length in any specific unit for padding.
- auto: This property leaves some spaces for padding determined by browsers.
Example: Below example illustrates the Scroll Padding bottom property:
<!DOCTYPE html> <html> <head> <title>
CSS Scroll Padding bottom
</title>
<style>
h 1 {
color : green ;
}
.element{
border : 2px solid black ;
}
.container {
width : 500px ;
height : 200px ;
margin-left : auto ;
margin-right : auto ;
border : 2px solid black ;
overflow : scroll ;
position : relative ;
}
.element {
width : 480px ;
height : 180px ;
scroll-snap-align: start;
scroll-snap- stop : normal ;
color : white ;
font-size : 50px ;
display : flex;
justify- content : center ;
align-items: center ;
}
.y-mandatory {
scroll-snap-type: y mandatory;
/* scroll-padding: top right bottom left */
scroll- padding-bottom : 100px ;
}
.element:nth-child( 1 ) {
background :
}
.element:nth-child( 2 ) {
background :
}
.element:nth-child( 3 ) {
background :
}
</style>
</head> <body> < center >
<h 1 >GeeksforGeeks</h 1 >
<h 4 >CSS Scroll Padding bottom </h 4 >
<div class="container y- scroll y-mandatory">
<div class="wrapper">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>
</ center >
</body> </html> |
Output:
Supported Browsers: The browsers supported by CSS Scroll Padding bottom are listed below:
- Google Chrome 69
- Edge 79
- Firefox 68
- Opera 56
- Safari 14.1