Skip to content
Related Articles

Related Articles

CSS | Scroll Padding top

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Jun, 2022

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!