CSS | Scroll Padding bottom

Last Updated : 30 Jun, 2022

The Scroll Padding bottom is an inbuilt property in Scroll Snap module. This property set the scroll padding 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-bottom: [  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 bottom property:

css

<!DOCTYPE html> 
<html> 
 
<head> 
    <title> 
        CSS Scroll Padding bottom
    </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-bottom: 100px;
        } 
         
        .element:nth-child(1) { 
            background: 
url("https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png"); 
        } 
         
        .element:nth-child(2) { 
            background: 
url("https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png"); 
        } 
         
        .element:nth-child(3) { 
            background: 
url("https://www.geeksforgeeks.org/wp-content/uploads/javascript-768x256.png"); 
        } 
    </style> 
</head> 
 
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <h4>CSS Scroll Padding bottom</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 bottom are listed below:

Google Chrome 69
Edge 79
Firefox 68
Opera 56
Safari 14.1

HTML DOM embed type property

skyridetim

Improve

Article Tags :

CSS | Scroll Padding bottom

css

Similar Reads

Thank You!

What kind of Experience do you want to share?