Thuộc tính Scroll Snap stop là một thuộc tính tích hợp sẵn trong module Scroll Snap. Thuộc tính Scroll Snap stop dừng hoặc khóa cuộn tại vị trí cụ thể bạn chỉ định. Nó hoạt động như một mẫu trong mỗi slide của bạn. Khi người dùng cuộn, mẫu tự động thay đổi, vừa với nền và cố định nội dung. Đây là thuộc tính tùy chọn trong module scroll snap.
Thuộc tính Scroll Snap stop cho phép nhà phát triển dừng thao tác cuộn của người dùng ở một vị trí nhất định. Giả sử người dùng cuộn trang rất mạnh bằng bánh xe chuột. Thông thường cuộn sẽ dừng khi hết điểm cuộn và không còn gì để xem. Nhưng với thuộc tính này, nhà phát triển có thể chỉ định điểm dừng của trình duyệt. Điều này không phụ thuộc vào độ lớn của thao tác cuộn.
Syntax:
scroll-snap-stop: normal | always;
Parameter: Thuộc tính này chỉ chấp nhận hai tham số được đề cập ở trên. Dưới đây là mô tả chi tiết:
- normal: Thuộc tính này là giá trị mặc định. Trình duyệt sẽ đi qua vị trí snapping mà không dừng lại ở vị trí cụ thể nào.
- always: Thuộc tính này cho phép dừng tại vị trí snapping.
Example: Ví dụ dưới đây minh họa thuộc tính Scroll Snap stop:
HTML<!DOCTYPE html>
<html>
<head>
<title>
CSS Scroll Snap Stop
</title>
<style>
h1 {
color: green;
}
.container {
display: flex;
overflow: auto;
outline: 2px solid black;
flex: none;
}
.container.y {
width: 320px;
height: 200px;
flex-flow: column nowrap;
}
.container > div {
text-align: center;
scroll-snap-align: center;
flex: none;
}
.y.container > div {
line-height: 150px;
font-size: 60px;
width: 300px;
height: 180px;
}
.y.proximity-scroll-snapping {
scroll-snap-type: y proximity;
}
.proximity-scroll-snapping > div {
scroll-snap-stop: always;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>CSS Scroll Snap Stop</h4>
<div class="container y proximity-scroll-snapping">
<div style="background:green;">Geeks</div>
<div style="background:cyan;">HTML</div>
<div style="background:brown;">CSS</div>
<div style="background:purple;">JavaScript</div>
<div style="background:yellow;">Bootstrap</div>
</div>
</center>
</body>
</html>
Output:
Supported Browsers: Các trình duyệt được hỗ trợ bởi CSS Scroll Snap Stop được liệt kê dưới đây:
- Google Chrome 75 trở lên
- Edge 79 trở lên
- Firefox 103 trở lên
- Safari 15 trở lên
- Opera 62 trở lên