Tidadigi Logo

CSS | Scroll Padding bottom

Thuộc tính Scroll Padding bottom được tích hợp trong module Scroll Snap. Thuộc tính này thiết lập thuộc tính scroll padding viết tắt. Thuộc tính này hoạt động như một nam châm ở phía trên phần tử trượt. Nó dính vào đầu view-port và dừng cuộn (bắt buộc) tại vị trí đó. Thuộc tính Scroll Padding là tùy chọn chỉ dùng khi Scroll Snap type property được đặt thành none.

Cú pháp:

scroll-padding-bottom: [  length percentage | auto ]

Giá trị thuộc tính: Thuộc tính này chấp nhận hai giá trị được đề cập ở trên. Chúng được mô tả dưới đây:

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

Ví dụ: Ví dụ dưới đây minh họa thuộc tính Scroll Padding bottom:

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>

Đầu ra:

css-scroll-padding-bottom 

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

  • Google Chrome 69
  • Edge 79
  • Firefox 68
  • Opera 56
  • Safari 14.1

Last Updated : 21/07/2025