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.
Syntax:
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:
html
<!DOCTYPE html> <html>
<head>
<title>
CSS Scroll Padding top
</title>
<style>
h1 {
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-top: 50px;
}
.element:nth-child(1) {
background:
}
.element:nth-child(2) {
background:
}
.element:nth-child(3) {
background:
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>CSS Scroll Padding top</h4>
<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 top are listed below:
- Google Chrome 69
- Edge 79
- Opera 56
- Firefox 68
- Safari 14.1