Related Articles

Related Articles

CSS | Scroll Padding top
  • Last Updated : 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                     
  
      

chevron_right


Output:

Supported Browsers: The browsers supported by CSS Scroll Padding top are listed below:

  • Google Chrome 69
  • Internet Explorer 11
  • Firefox 68
  • Safari 11



My Personal Notes arrow_drop_up
Recommended Articles
Page :