Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Oversrcoll Behavior trong Tailwind CSS
Trình bày cách sử dụng tính năng Overscroll Behavior trong Tailwind CSS để tùy chỉnh hành vi cuộn trang một cách dễ dàng và hiệu quả.
Trong thiết kế web hiện đại, cuộn trang (scrolling) là một phần quan trọng để người dùng có thể tương tác với nội dung trên website. Tuy nhiên, một số trình duyệt web cho phép cuộn trang vượt quá giới hạn của khung trang (viewport) và tạo ra hiệu ứng "overscroll" không mong muốn.
Để giải quyết vấn đề này, Tailwind CSS đã giới thiệu tính năng Overscroll Behavior, cho phép người dùng tùy chỉnh hành vi cuộn trang một cách dễ dàng và hiệu quả. Trong bài viết này, chúng ta sẽ tìm hiểu về tính năng này và cách sử dụng nó trong thiết kế web với Tailwind CSS.
1. Overscroll Behavior trong Tailwind CSS là gì?
Overscroll Behavior là một tính năng có sẵn trên trình duyệt web, cho phép người dùng tùy chỉnh hành vi cuộn trang trên trình duyệt một cách linh hoạt. Khi người dùng cuộn trang trên trình duyệt web, nội dung trang sẽ được hiển thị theo chiều dọc hoặc ngang tùy thuộc vào hướng cuộn trang.
Bài viết này được đăng tại [free tuts .net]
Trong một số trường hợp, cuộn trang có thể vượt quá giới hạn của khung trang (viewport) và tạo ra hiệu ứng "overscroll" không mong muốn, khiến trang web trở nên khó chịu cho người dùng. Overscroll Behavior giúp ngăn chặn hiệu ứng overscroll này và cung cấp cho người dùng nhiều tùy chọn để tùy chỉnh hành vi cuộn trang, bao gồm:
overscroll-auto: Tự động xác định hành vi cuộn trang, tùy thuộc vào trình duyệt web và nền tảng sử dụng.overscroll-contain: Giữ cho hành vi cuộn trang nằm trong khung trang và không vượt quá.overscroll-none: Ngăn chặn cuộn trang hoàn toàn, không cho phép cuộn trang bất kỳ khi nào.overscroll-x-*thuộc tính*: Tùy chỉnh hành vi cuộn trang theo chiều ngang (trái - phải).overscroll-y-*thuộc tính*: Tùy chỉnh hành vi cuộn trang theo chiều dọc (lên - xuống).overscroll-unset: Sử dụng giá trị mặc định được xác định bởi trình duyệt web.
Với Overscroll Behavior, người dùng có thể tùy chỉnh hành vi cuộn trang sao cho phù hợp với thiết kế web của mình và mang lại trải nghiệm tốt nhất cho người dùng.
2. Sử dụng Overscroll Behavior trong Tailwind CSS
Tôi sẽ cho bạn một vài ví dụ demo để bạn có thể hiểu rõ hơn về class Overscroll Behavior.
Thuộc tính Oversrcoll-contain của Overscroll Behavior
Khi thiết kế một trang web, bạn có thể muốn ngăn cuộn trong một khu vực nhất định không làm cho phần tử cha cuộn theo. Điều này có thể được thực hiện bằng cách sử dụng thuộc tính overscroll-contain. Thuộc tính này cho trình duyệt biết rằng phần tử được chỉ định không được phép cuộn ảnh hưởng đến phần tử cha của nó.
Tuy nhiên, điều quan trọng cần lưu ý là một số hệ điều hành hỗ trợ hiệu ứng "bounce" khi cuộn qua cuối một container. Nếu bạn muốn giữ lại hiệu ứng này, bạn có thể sử dụng overscroll-contain để chỉ ngăn cuộn không làm cho phần tử cha cuộn theo, nhưng vẫn cho phép hiệu ứng bounce xảy ra. Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Freetuts - Tìm hiểu về Overflow trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<!--Sử dụng overscroll-contain để ngăn chặn hiệu ứng overscroll-->
<div class="overscroll-contain">
Well, let me tell you something, funny boy. Y'know that little stamp,
the one that says "New York Public Library"? Well that may not mean
anything to you, but that means a lot to me. One whole hell of a lot.
Sure, go ahead, laugh if you want to. I've seen your type before:
Flashy, making the scene, flaunting convention. Yeah, I know what you're
thinking. What's this guy making such a big stink about old library
books? Well, let me give you a hint, junior. Maybe we can live without
libraries, people like you and me. Maybe. Sure, we're too old to change
the world, but what about that kid, sitting down, opening a book, right
now, in a branch at the local library and finding drawings of pee-pees
and wee-wees on the Cat in the Hat and the Five Chinese Brothers?
Doesn't HE deserve better?
</div>
</div>
</body>
</html>Còn đây là kết quả:
Hình ảnh sử dụng class overscroll-contain
Khi người dùng cuộn trang, nội dung sẽ được hiển thị trong khung trang và không cho phép hiệu ứng overscroll xảy ra. Như vậy, tính năng overscroll-contain giúp tăng trải nghiệm của người dùng trên trang web của bạn.
Thuộc tính Overscroll-none của Overscroll Behavior
Để ngăn chặn hiệu ứng lăn quá cuối màn hình, một giải pháp là sử dụng thuộc tính overscroll-none. Bằng cách áp dụng nó vào khu vực đích, bạn có thể ngăn cuộn trong khu vực đó không kích hoạt cuộn trong phần tử cha, từ đó tránh hiệu ứng lăn quá cuối màn hình. Một lợi ích khác của việc sử dụng overscroll-none là nó giúp cải thiện hiệu suất tổng thể của trang web hoặc ứng dụng của bạn bằng cách giảm cuộn không cần thiết.
Vì vậy, nếu bạn muốn tạo ra trải nghiệm người dùng tốt hơn và ngăn chặn hiệu ứng lăn quá cuối màn hình, hãy xem xét sử dụng thuộc tính overscroll-none trong thiết kế của bạn. Người dùng của bạn sẽ cảm ơn bạn vì điều đó!
Ví dụ minh họa như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Freetuts - Tìm hiểu về Overflow trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<!-- Áp dụng class overscroll-none-->
<div class="overscroll-none">
Well, let me tell you something, funny boy. Y'know that little stamp,
the one that says "New York Public Library"? Well that may not mean
anything to you, but that means a lot to me. One whole hell of a lot.
Sure, go ahead, laugh if you want to. I've seen your type before:
Flashy, making the scene, flaunting convention. Yeah, I know what you're
thinking. What's this guy making such a big stink about old library
books? Well, let me give you a hint, junior. Maybe we can live without
libraries, people like you and me. Maybe. Sure, we're too old to change
the world, but what about that kid, sitting down, opening a book, right
now, in a branch at the local library and finding drawings of pee-pees
and wee-wees on the Cat in the Hat and the Five Chinese Brothers?
Doesn't HE deserve better?
</div>
</div>
</body>
</html>overscroll-noneoverscroll-none sẽ ngăn người dùng cuộn qua đáy trang và giữ nội dung được hiển thị trên màn hình.Thuộc tính Overscroll-auto của Overscroll Behavior
Bằng cách sử dụng tính năng overscroll-auto, bạn có thể cho phép người dùng tiếp tục cuộn trang bất cứ khi nào họ đến đến biên của khu vực cuộn chính. Điều này có nghĩa là người dùng có thể tiếp tục cuộn mà không cần phải di chuyển con trỏ hoặc ngón tay của họ đến một phần khác trên màn hình.
Tính năng overscroll-auto là một cách đơn giản nhưng hiệu quả để cải thiện tính khả dụng của trang web hoặc ứng dụng của bạn. Vì vậy, tại sao bạn không thử nó hôm nay và xem nó có thể giúp người dùng của bạn điều hướng nội dung một cách dễ dàng hơn không? Ví dụ minh họa để bạn thấy:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Freetuts - Tìm hiểu về Overflow trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<!-- Áp dụng class overscroll-auto-->
<div class="overscroll-auto">
Well, let me tell you something, funny boy. Y'know that little stamp,
the one that says "New York Public Library"? Well that may not mean
anything to you, but that means a lot to me. One whole hell of a lot.
Sure, go ahead, laugh if you want to. I've seen your type before:
Flashy, making the scene, flaunting convention. Yeah, I know what you're
thinking. What's this guy making such a big stink about old library
books? Well, let me give you a hint, junior. Maybe we can live without
libraries, people like you and me. Maybe. Sure, we're too old to change
the world, but what about that kid, sitting down, opening a book, right
now, in a branch at the local library and finding drawings of pee-pees
and wee-wees on the Cat in the Hat and the Five Chinese Brothers?
Doesn't HE deserve better?
</div>
</div>
</body>
</html>Kết quả của ví dụ
Hình ảnh sử dụng class overscroll-auto
Khi sử dụng lớp overscroll-auto sẽ cho phép người dùng cuộn qua đáy trang khi họ cuộn hết nội dung trong phần tử cha.
3. Áp dụng có điều kiện với Overscroll Behavior trong Tailwind CSS
Các trạng thái hover, focus, active và visited trong CSS được sử dụng để tùy chỉnh hiệu ứng của phần tử khi người dùng tương tác với nó. Trong Tailwind CSS, bạn cũng có thể sử dụng các trạng thái này để áp dụng Overscroll Behavior cho các phần tử tương ứng.
Ví dụ, nếu bạn muốn ngăn người dùng cuộn qua đáy trang khi họ di chuột qua một phần tử, bạn có thể sử dụng lớp overscroll-none trong trạng thái hover như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Freetuts - Tìm hiểu về Overflow trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<!-- Áp dụng class hover:overscroll-none-->
<div class="h-screen hover:overscroll-none">
Well, let me tell you something, funny boy. Y'know that little stamp,
the one that says "New York Public Library"? Well that may not mean
anything to you, but that means a lot to me. One whole hell of a lot.
Sure, go ahead, laugh if you want to. I've seen your type before:
Flashy, making the scene, flaunting convention. Yeah, I know what you're
thinking. What's this guy making such a big stink about old library
books? Well, let me give you a hint, junior. Maybe we can live without
libraries, people like you and me. Maybe. Sure, we're too old to change
the world, but what about that kid, sitting down, opening a book, right
now, in a branch at the local library and finding drawings of pee-pees
and wee-wees on the Cat in the Hat and the Five Chinese Brothers?
Doesn't HE deserve better?
</div>
</div>
</body>
</html>Khi chạy kết quả trông như đây
Hình ảnh sử dụng class overscroll-none khi di chuột tới
Lớp hover:overscroll-none sẽ ngăn người dùng cuộn qua đáy trang khi họ di chuột qua phần tử, nhưng cho phép cuộn lại khi họ di chuột ra khỏi phần tử đó. Tương tự, bạn có thể sử dụng các lớp tương ứng để áp dụng Overscroll Behavior với các trạng thái khác, ví dụ như focus:overscroll-none, active:overscroll-none, hoặc visited:overscroll-none.
Việc sử dụng các trạng thái này giúp bạn tùy chỉnh hiệu ứng Overscroll Behavior phù hợp với các tương tác người dùng khác nhau.
4. Kết luận
Trong bài viết này, chúng ta đã tìm hiểu về Overscroll Behavior trong Tailwind CSS và cách sử dụng nó để kiểm soát hành vi cuộn trang. Với Overscroll Behavior, bạn có thể kiểm soát xem trang có tiếp tục cuộn hay dừng lại khi đến đầu hoặc cuối trang. Hy vọng bài viết này sẽ giúp ích cho bạn trong quá trình phát triển giao diện web của mình.
