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.
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:
Supported Browsers: The browsers supported by CSS Scroll Padding bottom are listed below:
- Google Chrome 69
- Internet Explorer 11
- Firefox 68
- Safari 11
- CSS | Scroll Padding top
- CSS | Scroll Padding
- CSS padding-bottom Property
- Hide scroll bar, but while still being able to scroll using CSS
- CSS | padding-top Property
- CSS | padding-right Property
- CSS | Margins and Padding
- CSS | padding-left Property
- CSS | scroll snap
- CSS | Scroll Snap stop
- CSS | Scroll Snap type
- CSS | scroll-behavior Property
- CSS | bottom Property
- CSS margin-bottom Property
- CSS border-bottom Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.