Tidadigi Logo

Tailwind CSS overscroll Behavior

Class này chấp nhận nhiều giá trị trong tailwind CSS. Nó là một giải pháp thay thế cho CSS Overscroll-behavior property. Class này dùng để thiết lập cách trình duyệt hoạt động khi đạt đến ranh giới của vùng cuộn. Thuộc tính này ngăn cuộn trang không mong muốn khi có nhiều vùng cuộn.

CSS có thuộc tính riêng cho CSS Overscroll-behavior-x và CSS Overflow-behavior-y. Chúng ta sẽ cùng tìm hiểu trong bài viết này.

Các class Overscroll Behavior:

  • overscroll-auto
  • overscroll-contain
  • overscroll-none
  • overscroll-y-auto
  • overscroll-y-contain
  • overscroll-y-none
  • overscroll-x-auto
  • overscroll-x-contain
  • overscroll-x-none

overscroll-auto: Nó dùng để đặt hành vi cuộn về mặc định. Toàn bộ trang cùng với phần tử sẽ cuộn khi đạt đến ranh giới phần tử. Đây là giá trị mặc định của thuộc tính.

Cú pháp:

<element class="overscroll-auto">...</element>

Ví dụ:

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body class="text-center">
    <center>
        <h1 class="text-green-600 text-5xl font-bold">
            GeeksforGeeks
        </h1>

        <b>Tailwind CSS Overscroll Class</b>

        <div class="flex">
            <div class="overscroll-contain bg-green-200 p-4 
                mx-24 w-1/3 text-justify">
                This portal has been created to provide well
                written, well thought and well explained
                solutions for selected questions. An IIT
                Roorkee alumnus and founder of GeeksforGeeks.
                He loves to solve programming problems in
                most efficient ways. Apart from GeeksforGeeks,
                he has worked with DE Shaw and Co. as a
                software developer and JIIT Noida as an
                assistant professor.
            </div>

            <div class="overscroll-auto overflow-y-scroll 
                bg-green-400 p-2 w-1/4 h-24">
                This is a smaller element that is also
                scrollable. The overscroll behavior can
                be used to control if the main content
                behind would scroll when this element's
                vertical boundary is reached.
            </div>
        </div>
    </center>
</body>

</html>

Kết quả:

overscroll-contain: Nó dùng để đặt hành vi cuộn về mặc định trên phần tử được sử dụng. Cuộn tiếp phần tử sau khi đạt ranh giới sẽ không cuộn các phần tử phía sau. Sẽ không có chuỗi cuộn xảy ra ở các vùng cuộn lân cận.

Cú pháp:

<element class="overscroll-contain">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Overscroll Class</b> 
    <div class="flex">
    <div class="overscroll-contain bg-green-200 p-4 
                mx-24 w-1/3 text-justify">
      This portal has been created to provide well written,   
      well thought and well explained solutions for selected   
      questions. An IIT Roorkee alumnus and founder of   
      GeeksforGeeks. He loves to solve programming problems  
      in most efficient ways. Apart from GeeksforGeeks, he   
      has worked with DE Shaw and Co. as a software developer   
      and JIIT Noida as an assistant professor.
    </div> 
    <div class="overscroll-contain overflow-y-scroll 
                bg-green-400 p-2 w-1/4 h-24">
      This is a smaller element that is also 
      scrollable. The overscroll behavior 
      can be used to control if the main 
      content behind would scroll when this 
      element's vertical boundary is reached.
    </div>
    </div>
</center>
</body> 

</html>

Kết quả:

overscroll-none: Nó dùng để ngăn chặn chuỗi cuộn trên tất cả các phần tử. Hành vi tràn cuộn mặc định cũng bị ngăn chặn.

Cú pháp:

<element class="overscroll-none">...</element>

Ví dụ:

HTML 
<!DOCTYPE html>
<html>
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Overscroll Class</b> 
    <div class="flex">
    <div class="overscroll-contain bg-green-200 p-4 
                mx-24 w-1/3 text-justify">
      This portal has been created to provide well written,   
      well thought and well explained solutions for selected   
      questions. An IIT Roorkee alumnus and founder of   
      GeeksforGeeks. He loves to solve programming problems  
      in most efficient ways. Apart from GeeksforGeeks, he   
      has worked with DE Shaw and Co. as a software developer   
      and JIIT Noida as an assistant professor.
    </div> 
    <div class="overscroll-none overflow-y-scroll 
                bg-green-400 p-2 w-1/4 h-24">
      This is a smaller element that is also 
      scrollable. The overscroll behavior 
      can be used to control if the main 
      content behind would scroll when this 
      element's vertical boundary is reached.
    </div>
    </div>
</center>
</body> 

</html>

Kết quả:

Overscroll-behavior-y: Class này dùng để thiết lập hành vi khi đạt đến ranh giới dọc của vùng cuộn. Nó dùng được trên các trang web có nhiều vùng cuộn. Việc cuộn một vùng sẽ không ảnh hưởng đến toàn bộ trang. Hiệu ứng này được gọi là scroll-chaining và có thể bật tắt.

overscroll-y-auto: Nó dùng để đặt hành vi cuộn trên trục y về mặc định cho tất cả phần tử. Toàn bộ trang sẽ cuộn khi đạt ranh giới của phần tử. Đây là giá trị mặc định.

Cú pháp:

<element class="overscroll-y-auto">...</element>

Ví dụ:

HTML 
<!DOCTYPE html>
<html>
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS overscroll-behavior-y Class</b> 
    <div class="flex">
    <div class="overscroll-contain bg-green-200 p-4 
                mx-24 w-1/3 text-justify">
      This portal has been created to provide well written,   
      well thought and well explained solutions for selected   
      questions. An IIT Roorkee alumnus and founder of   
      GeeksforGeeks. He loves to solve programming problems  
      in most efficient ways. Apart from GeeksforGeeks, he   
      has worked with DE Shaw and Co. as a software developer   
      and JIIT Noida as an assistant professor.
    </div> 
    <div class="overscroll-behavior-y-auto overflow-y-scroll 
                bg-green-400 p-2 w-1/4 h-24">
      This is a smaller element that is also 
      scrollable. The overscroll behavior 
      can be used to control if the main 
      content behind would scroll when this 
      element's vertical boundary is reached.
    </div>
    </div>
</center>
</body> 

</html>

Kết quả:

overscroll-y-contain: Nó dùng để đặt hành vi cuộn trên trục y về mặc định cho phần tử được dùng. Sẽ không có chuỗi cuộn xảy ra ở các vùng cuộn lân cận. Các phần tử phía sau cũng sẽ không cuộn.

Cú pháp:

<element class="overscroll-y-contain">...</element>

Ví dụ:

HTML 
<!DOCTYPE html>
<html>
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS overscroll-behavior-y Class</b> 
    <div class="flex">
    <div class="overscroll-contain bg-green-200 p-4 
                mx-24 w-1/3 text-justify">
      This portal has been created to provide well written,   
      well thought and well explained solutions for selected   
      questions. An IIT Roorkee alumnus and founder of   
      GeeksforGeeks. He loves to solve programming problems  
      in most efficient ways. Apart from GeeksforGeeks, he   
      has worked with DE Shaw and Co. as a software developer   
      and JIIT Noida as an assistant professor.
    </div> 
    <div class="overscroll-behavior-y-contain overflow-y-scroll 
                bg-green-400 p-2 w-1/4 h-24">
      This is a smaller element that is also 
      scrollable. The overscroll behavior 
      can be used to control if the main 
      content behind would scroll when this 
      element's vertical boundary is reached.
    </div>
    </div>
</center>
</body> 

</html>

Kết quả:

overscroll-y-none: Nó dùng để ngăn chặn chuỗi cuộn trên trục y của tất cả các phần tử. Hành vi tràn cuộn mặc định cũng sẽ bị ngăn chặn.

Cú pháp:

<element class="overscroll-y-none">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS overscroll-behavior-y Class</b> 
    <div class="flex">
    <div class="overscroll-contain bg-green-200 p-4 
                mx-24 w-1/3 text-justify">
      This portal has been created to provide well written,   
      well thought and well explained solutions for selected   
      questions. An IIT Roorkee alumnus and founder of   
      GeeksforGeeks. He loves to solve programming problems  
      in most efficient ways. Apart from GeeksforGeeks, he   
      has worked with DE Shaw and Co. as a software developer   
      and JIIT Noida as an assistant professor.
    </div> 
    <div class="overscroll-behavior-y-none overflow-y-scroll 
                bg-green-400 p-2 w-1/4 h-24">
      This is a smaller element that is also 
      scrollable. The overscroll behavior 
      can be used to control if the main 
      content behind would scroll when this 
      element's vertical boundary is reached.
    </div>
    </div>
</center>
</body> 

</html>

Kết quả:

Overscroll-behavior-x: Class này dùng để thiết lập hành vi trình duyệt khi đạt ranh giới ngang của vùng cuộn. Nó dùng trên các trang web có nhiều vùng cuộn. Cuộn một vùng không ảnh hưởng trang.

overscroll-x-auto: Nó dùng để đặt hành vi cuộn trên trục x về mặc định trên tất cả các phần tử. Toàn bộ trang sẽ cuộn khi đạt đến ranh giới của phần tử. Đây là giá trị mặc định.

Cú pháp:

<element class="overscroll-x-auto">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS overscroll-behavior-x Class</b> 
    <div class="flex">
    <div class="overscroll-contain bg-green-200 p-4 
                mx-24 w-1/3 text-justify">
      This portal has been created to provide well written,   
      well thought and well explained solutions for selected   
      questions. An IIT Roorkee alumnus and founder of   
      GeeksforGeeks. He loves to solve programming problems  
      in most efficient ways. Apart from GeeksforGeeks, he   
      has worked with DE Shaw and Co. as a software developer   
      and JIIT Noida as an assistant professor.
    </div> 
    <div class="overscroll-behavior-x-auto overflow-x-scroll 
                bg-green-400 p-2 w-1/4 h-24">
      This is a smaller element that is also 
      scrollable. The overscroll behavior 
      can be used to control if the main 
      content behind would scroll when this 
      element's vertical boundary is reached.
    </div>
    </div>
</center>
</body> 

</html>

Kết quả:

overscroll-x-contain: Nó dùng để đặt hành vi cuộn trên trục x về mặc định cho phần tử được dùng. Không có chuỗi cuộn xảy ra ở vùng cuộn lân cận. Các phần tử phía sau sẽ không cuộn.

Cú pháp:

<element class="overscroll-x-contain">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS overscroll-behavior-x Class</b> 
    <div class="flex">
    <div class="overscroll-contain bg-green-200 p-4 
                mx-24 w-1/3 text-justify">
      This portal has been created to provide well written,   
      well thought and well explained solutions for selected   
      questions. An IIT Roorkee alumnus and founder of   
      GeeksforGeeks. He loves to solve programming problems  
      in most efficient ways. Apart from GeeksforGeeks, he   
      has worked with DE Shaw and Co. as a software developer   
      and JIIT Noida as an assistant professor.
    </div> 
    <div class="overscroll-behavior-x-contain overflow-x-scroll 
                bg-green-400 p-2 w-1/4 h-24">
      This is a smaller element that is also 
      scrollable. The overscroll behavior 
      can be used to control if the main 
      content behind would scroll when this 
      element's vertical boundary is reached.
    </div>
    </div>
</center>
</body> 

</html>

Kết quả:

overscroll-x-none: Nó dùng để ngăn chặn chuỗi cuộn trên trục x của tất cả phần tử. Hành vi tràn cuộn mặc định cũng bị ngăn chặn.

Cú pháp:

<element class="overscroll-x-none">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS overscroll-behavior-x Class</b> 
    <div class="flex">
    <div class="overscroll-contain bg-green-200 p-4 
                mx-24 w-1/3 text-justify">
      This portal has been created to provide well written,   
      well thought and well explained solutions for selected   
      questions. An IIT Roorkee alumnus and founder of   
      GeeksforGeeks. He loves to solve programming problems  
      in most efficient ways. Apart from GeeksforGeeks, he   
      has worked with DE Shaw and Co. as a software developer   
      and JIIT Noida as an assistant professor.
    </div> 
    <div class="overscroll-behavior-x-none overflow-x-scroll 
                bg-green-400 p-2 w-1/4 h-24">
      This is a smaller element that is also 
      scrollable. The overscroll behavior 
      can be used to control if the main 
      content behind would scroll when this 
      element's vertical boundary is reached.
    </div>
    </div>
</center>
</body> 

</html>

Kết quả:


Last Updated : 20/07/2025