Open In App
Related Articles

CSS | Scroll Padding top

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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


Last Updated : 30 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads