Esta clase acepta más de un valor en Tailwind CSS . Es la alternativa a la propiedad CSS Overscroll-behavior . Esta clase se utiliza para establecer el comportamiento del navegador cuando se alcanza el límite de un área de desplazamiento. Esta propiedad se puede utilizar para evitar desplazamientos no deseados en páginas en las que hay varias áreas de desplazamiento.
Hay una propiedad separada en CSS para CSS Overscroll-behavior-x y CSS Overflow-behavior-y , pero la cubriremos en este único artículo.
Clase de comportamiento de desplazamiento excesivo:
- overscroll-auto
- overscroll-contener
- overscroll-ninguno
- overscroll-y-auto
- overscroll-y-contener
- overscroll-y-none
- overscroll-x-auto
- overscroll-x-contener
- overscroll-x-ninguno
overscroll-auto: se utiliza para establecer el comportamiento de desplazamiento por defecto. Toda la página junto con el elemento se desplazará incluso si se alcanza el límite del elemento. Es el valor predeterminado.
Sintaxis:
<element class="overscroll-auto">...</element>
Ejemplo:
HTML
<!DOCTYPE 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>
Producción:
overscroll-contain: se utiliza para establecer el comportamiento de desplazamiento por defecto solo en el elemento utilizado. Desplazar el elemento más allá de que haya alcanzado el límite no desplazará los elementos detrás de él. No se produciría ningún enstringmiento de desplazamiento en las áreas de desplazamiento vecinas.
Sintaxis:
<element class="overscroll-contain">...</element>
Ejemplo:
HTML
<!DOCTYPE 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>
Producción:
overscroll-none: se utiliza para evitar el desplazamiento en string en todos los elementos. También se evita el comportamiento de desbordamiento de desplazamiento predeterminado.
Sintaxis:
<element class="overscroll-none">...</element>
Ejemplo:
HTML
<!DOCTYPE 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>
Producción:
Overscroll-behavior-y: esta clase se utiliza para establecer el comportamiento del navegador cuando se alcanza el límite vertical de un área de desplazamiento. Esto se puede usar en sitios web donde hay múltiples áreas de desplazamiento y el desplazamiento de un área no afecta la página en su conjunto. Este efecto se conoce como enstringmiento de desplazamiento y se puede habilitar o deshabilitar según corresponda.
overscroll-y-auto: Esto se usa para establecer el comportamiento de desplazamiento en el eje y de forma predeterminada en todos los elementos. Toda la página se desplazará incluso si se alcanza el límite del elemento. Es el valor predeterminado.
Sintaxis:
<element class="overscroll-y-auto">...</element>
Ejemplo:
HTML
<!DOCTYPE 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>
Producción:
overscroll-y-contain: se utiliza para establecer el comportamiento de desplazamiento en el eje y de forma predeterminada solo en el elemento utilizado. No se produciría ningún enstringmiento de desplazamiento en las áreas de desplazamiento vecinas y los elementos que se encuentran detrás no se desplazarán.
Sintaxis:
<element class="overscroll-y-contain">...</element>
Ejemplo:
HTML
<!DOCTYPE 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>
Producción:
overscroll-y-none: se utiliza para evitar el desplazamiento en string en el eje y de todos los elementos. También se evita el comportamiento de desbordamiento de desplazamiento predeterminado.
Sintaxis:
<element class="overscroll-y-none">...</element>
Ejemplo:
HTML
<!DOCTYPE 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>
Producción:
Overscroll-behavior-x: esta clase solía establecer el comportamiento del navegador cuando se alcanza el límite horizontal de un área de desplazamiento. Esto se puede usar en sitios web donde hay múltiples áreas de desplazamiento y el desplazamiento de un área no afecta la página en su conjunto.
overscroll-x-auto: se utiliza para establecer el comportamiento de desplazamiento en el eje x por defecto en todos los elementos. Toda la página se desplazará incluso si se alcanza el límite del elemento. Es el valor predeterminado.
Sintaxis:
<element class="overscroll-x-auto">...</element>
Ejemplo:
HTML
<!DOCTYPE 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>
Producción:
overscroll-x-contain: se utiliza para establecer el comportamiento de desplazamiento en el eje x por defecto solo en el elemento utilizado. No se produciría ningún enstringmiento de desplazamiento en las áreas de desplazamiento vecinas y los elementos que se encuentran detrás no se desplazarán.
Sintaxis:
<element class="overscroll-x-contain">...</element>
Ejemplo:
HTML
<!DOCTYPE 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>
Producción:
overscroll-x-none: se utiliza para evitar el desplazamiento en string en el eje x de todos los elementos. También se evita el comportamiento de desbordamiento de desplazamiento predeterminado.
Sintaxis:
<element class="overscroll-x-none">...</element>
Ejemplo:
HTML
<!DOCTYPE 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>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA