Tidadigi Logo

CSS | Scroll Snap type

Thuộc tính Scroll Snap type là một thuộc tính tích hợp sẵn trong Scroll Snap module. Nếu không có Scroll Snap module, thư viện ảnh sẽ trông rất tệ. Trước Scroll Snap module, hiệu ứng này cần JavaScript. Giờ đây, có thể dùng Scroll Snap với CSS. Thuộc tính này hữu ích để dừng cuộn tại một điểm cụ thể trên trang. Bạn có thể dùng thuộc tính này trong phần thư viện trên trang web. Nó sẽ cho phép bạn kiểm soát hoàn toàn việc cuộn.

Cú pháp:

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]

Giá trị thuộc tính: Thuộc tính này dùng nhiều giá trị như đã đề cập ở trên và mô tả dưới đây:

  • none: Thuộc tính này tắt tính năng scroll snapping, bỏ qua các điểm snapping.
  • x: Thuộc tính này bật scroll snapping theo trục x. Nó hoạt động trên vị trí snap của trục ngang.
  • y: Thuộc tính này bật scroll snapping theo trục y. Nó hoạt động trên vị trí snap của trục dọc.
  • block: Thuộc tính này bật scroll snapping theo trục block. Nó hoạt động trên vị trí snap của trục block.
  • inline: Thuộc tính này bật scroll snapping theo trục inline. Nó hoạt động trên vị trí snap của trục inline.
  • both: Thuộc tính này bật scroll snapping với cả hai trục, bao gồm trục x, y, block và inline.
  • mandatory: Thuộc tính này bật giá trị nghiêm ngặt. Nó sẽ đi đến vị trí cuộn cụ thể khi không có cuộn.
  • proximity: Thuộc tính này bật giá trị nghiêm ngặt. Nó sẽ đi đến vị trí cuộn cụ thể nếu hành động cuộn gần vị trí snap. Nếu không gần, nó sẽ hoạt động bình thường và không snap.

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

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS Scroll Snap Type
    </title>
    <style>
        h1 {
            color: green;
        }
        
        
        .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;
        }
        
        .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 Snap Type</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-snap-type 

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

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

Last Updated : 21/07/2025