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
- CSS scroll-padding-right Property
- CSS scroll-padding-block-end Property
- CSS scroll-padding-left Property
- CSS scroll-padding-inline Property
- CSS scroll-padding-inline-start Property
- CSS scroll-padding-block-start Property
- CSS scroll-padding-block Property
- CSS scroll-padding-inline-end Property
- Hide scroll bar, but while still being able to scroll using CSS
- CSS | padding-top Property
- CSS scroll-margin-top property
- How to accordion scroll to top to open content in Bootstrap ?
- How to scroll to top on every Route click in Angular5 ?
- CSS | Margins and Padding
- CSS | padding-right Property
- CSS | padding-left Property
- CSS padding-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 email@example.com. 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.