Tidadigi Logo

CSS | Scroll Padding

Scroll Padding property là một thuộc tính sẵn có trong Scroll Snap module. Thuộc tính này dùng để thiết lập các thuộc tính scroll padding longhands.

Thuộc tính này hoạt động như một nam châm ở đầu phần tử trượt. Nó dính vào đầu viewport và dừng cuộn (một cách cưỡng ép) tại vị trí đó.

Scroll Padding property là tùy chọn, được dùng khi Scroll Snap type property được đặt thành none.

Syntax:

scroll-padding: [  length percentage | auto ]

Property Values: Thuộc tính này chấp nhận hai giá trị được đề cập bên dưới:

  • length-percentage: Thuộc tính này hoạt động giống như thuộc tính padding khác. Nó chứa độ dài padding tính theo đơn vị cụ thể.
  • auto: Thuộc tính này để lại một số khoảng trống cho padding do trình duyệt xác định.

Example: Ví dụ bên dưới minh họa Scroll Padding property:

html 
<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        CSS Scroll Padding
    </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: 50px 0px 0px 20px;
        } 
        
        .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</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:

 css-scroll-padding 

Supported Browsers: Các trình duyệt được hỗ trợ bởi CSS Scroll Padding được liệt kê dưới đây:

  • Google Chrome 69 trở lên
  • Edge 79 trở lên
  • Firefox 68 trở lên
  • Opera 56 trở lên
  • Safari 14.1 trở lên

Last Updated : 21/07/2025