Open In App
Related Articles

CSS | Scroll Padding top

Improve Article
Save Article
Like Article

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: 


<!DOCTYPE html>
        CSS Scroll Padding top
        h1 {
            color: green;
            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) {
        .element:nth-child(2) {
        .element:nth-child(3) {
        <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>



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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 30 Jun, 2022
Like Article
Save Article
Similar Reads
Complete Tutorials