CSS | Scroll Padding top - GeeksforGeeks

31 Oct, 2019
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:
<!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: 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 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
Internet Explorer 11
Firefox 68
Safari 11
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript