CSS - Overscroll Behavior: A Beginner's Guide

Xin chào các bạn tương lai của các pháp sư CSS! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của hành vi overscroll trong CSS. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng khám phá chủ đề này, từng bước một. Vậy, hãy chuẩn bị hành trang ảo của bạn, và让我们一起潜入!

What is Overscroll Behavior?

Trước khi chúng ta đi vào chi tiết, hãy hiểuoverscroll behavior là gì. Bạn có bao giờ cuộn qua một trang web trên điện thoại của mình và khi bạn đến cuối cùng, nó làm hiệu ứng弹跳 không? Đó chính là overscroll trong hành động! Nó giống như khi bạn đọc một cuốn sách và bạn cố gắng lật trang sau trang cuối cùng - có một chút kháng cự. CSS overscroll-behavior cho phép chúng ta kiểm soát cách một trang web hành xử trong những tình huống này.

Possible Values and Syntax

Bây giờ, hãy nhìn vào các giá trị khác nhau chúng ta có thể sử dụng với overscroll-behavior và cách viết chúng trong CSS của chúng ta. Dưới đây là một bảng tóm tắt tiện lợi:

Giá trị	Mô tả
auto	Hành vi mặc định - cho phép cuộn "tràn" sang phần tử tiếp theo
contain	Ngăn chặn chuỗi cuộn nhưng cho phép hiệu ứng弹跳
none	Ngăn chặn cả chuỗi cuộn và hiệu ứng弹跳

Cú pháp cơ bản trông như thế này:

element {
overscroll-behavior: value;
}

Hãy phân tích điều này với một số ví dụ!

Example 1: Default Behavior (auto)

body {
overscroll-behavior: auto;
}

Đây là thiết lập mặc định. Nó giống như để cuốn sách của bạn trên bàn - nó sẽ hành xử như bạn mong đợi, với cuộn bình thường và弹跳.

Example 2: Contain the Scroll

.scrollable-element {
overscroll-behavior: contain;
}

Hãy tưởng tượng bạn có một phần tử có thể cuộn trong trang web của bạn. Với 'contain', nó giống như đặt một bookmark ở cuối một chương. Bạn vẫn có thể lật các trang trong chương đó (hiệu ứng弹跳), nhưng bạn sẽ không vô tình lật sang chương tiếp theo (ngăn chặn chuỗi cuộn).

Example 3: No Overscroll Effects

.modal {
overscroll-behavior: none;
}

Đây giống như dán các trang của cuốn sách của bạn lại ở cuối. Không còn lật hoặc弹跳 - nó chỉ dừng lại.

Applies To

Bây giờ, bạn có thể tự hỏi, "Tôi có thể sử dụng thuộc tính này ở đâu?" Nó áp dụng cho tất cả các phần tử, nhưng đặc biệt hữu ích trên:

1. Phần tử body
2. Các container có thể cuộn (như một div với overflow: scroll)

CSS overscroll-behavior - Comparison of Values

Hãy so sánh các giá trị này với một tình huống thực tế. Hãy tưởng tượng bạn đang thiết kế một trang web có một sidebar có thể cuộn và một khu vực nội dung chính.

<div class="sidebar">
<!-- Nội dung của sidebar -->
</div>
<div class="main-content">
<!-- Nội dung chính -->
</div>

.sidebar {
height: 100vh;
overflow-y: scroll;
overscroll-behavior: contain;
}

.main-content {
overscroll-behavior: auto;
}

Trong ví dụ này, sidebar sẽ có hành vi cuộn riêng của nó được chứa, trong khi nội dung chính sẽ hành xử bình thường. Nó giống như có một cuốn sách nhỏ (sidebar) bên trong cuốn sách chính (trang web) - bạn có thể lật qua các trang của cuốn sách nhỏ mà không ảnh hưởng đến cuốn sách chính.

CSS overscroll-behavior - Two Keyword Values

Bạn có biết bạn có thể sử dụng hai giá trị với overscroll-behavior? Nó giống như đưa ra hướng dẫn riêng cho cuộn dọc và ngang.

element {
overscroll-behavior: vertical-value horizontal-value;
}

Ví dụ:

.custom-scroll {
overscroll-behavior: contain auto;
}

Điều này告诉浏览器 để chứa cuộn dọc nhưng cho phép hành vi bình thường cho cuộn ngang. Nó giống như có một cuốn sách mà bạn không thể lật qua trang cuối cùng theo chiều dọc, nhưng bạn vẫn có thể lật nó theo chiều ngang!

CSS overscroll-behavior - Associated Properties

Overscroll-behavior có một số người thân trong gia đình CSS. Hãy gặp họ:

1. overscroll-behavior-x: Điều khiển hành vi cuộn ngang
2. overscroll-behavior-y: Điều khiển hành vi cuộn dọc

Những này giống như các công cụ chuyên dụng trong hộp công cụ CSS của bạn. Khi bạn cần kiểm soát chính xác, những thuộc tính này là sự lựa chọn của bạn.

.horizontal-scroll {
overscroll-behavior-x: contain;
}

.vertical-scroll {
overscroll-behavior-y: none;
}

Trong ví dụ này, chúng tôi đang chứa cuộn ngang nhưng ngăn chặn hoàn toàn cuộn dọc. Nó giống như có một cuốn sách toàn cảnh mà bạn có thể cuộn theo chiều ngang, nhưng không thể cuộn theo chiều dọc!

Practical Application: A Modal Example

Hãy áp dụng tất cả kiến thức này vào một ví dụ thực tế - một cửa sổ modal.

<div class="page-content">
<!-- Nội dung chính của trang -->
</div>
<div class="modal">
<div class="modal-content">
<!-- Nội dung của modal -->
</div>
</div>

.page-content {
height: 2000px; /* Nội dung dài để启用滚动 }
}

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
overscroll-behavior: contain;
}

.modal-content {
background-color: white;
padding: 20px;
max-height: 80vh;
overflow-y: auto;
overscroll-behavior: contain;
}

Trong ví dụ này, chúng tôi đã tạo một modal che phủ nội dung chính. Bằng cách đặt overscroll-behavior: contain trên cả modal và nội dung của nó, chúng tôi đảm bảo rằng cuộn trong modal không ảnh hưởng đến trang chính, và bất kỳ cuộn overscroll nào cũng được chứa trong modal本身的范围内。

Conclusion

Và đó là tất cả, các học sinh yêu quý của tôi! Chúng ta đã cùng nhau hành trình qua vùng đất của CSS overscroll-behavior, từ khái niệm cơ bản đến các ứng dụng thực tế. Nhớ rằng, giống như bất kỳ cuốn sách nào, việc thành thạo CSS đòi hỏi thời gian và sự luyện tập. Đừng sợ thử nghiệm và mắc lỗi - đó là cách chúng ta học và phát triển.

Trong khi bạn tiếp tục cuộc phiêu lưu CSS của mình, hãy giữ kiến thức về overscroll-behavior trong túi sau lưng. Nó có thể看起来 như một chi tiết nhỏ, nhưng những chi tiết nhỏ này thực sự có thể nâng cấp thiết kế web của bạn từ tốt đến xuất sắc.

Chúc các bạn mã hóa vui vẻ, và hy vọng cuộn của bạn luôn mượt mà!

Credits: Image by storyset