CSS | Scroll Padding bottom - GeeksforGeeks

31 Oct, 2019
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:
<!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
Internet Explorer 11
Firefox 68
Safari 11
CSS-Properties
CSS
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
How to style a checkbox using CSS?
Simple Tic-Tac-Toe Game using JavaScript
How to define two column layout using flexbox ?
How to Create a Form Dynamically with the JavaScript?
How to fetch data from localserver database and display on HTML table using PHP ?