The Scroll Padding top is an inbuilt property in Scroll Snap module. This property set the scroll padding top 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-top: [ 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 top property:
Supported Browsers: The browsers supported by CSS Scroll Padding top are listed below:
- Google Chrome 69
- Internet Explorer 11
- Firefox 68
- Safari 11
- CSS | Scroll Padding
- CSS | Scroll Padding bottom
- 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-bottom Property
- CSS | padding-left Property
- HTML | DOM Style padding Property
- CSS | scroll snap
- How to scroll window using jQuery ?
- CSS | scroll-behavior Property
- CSS | Scroll Snap stop
- CSS | Scroll Snap type
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.