Choose a layout

overscroll-behavior

Report an Issue

	Class	Description
overscroll-auto Allows the browser's default overscroll behavior (like pull-to-refresh). CSS Rules `.overscroll-auto { overscroll-behavior: auto; }` Usage `<element class="overscroll-auto" />` Responsive Prefix `.overscroll-auto` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:overscroll-auto" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="overscroll-auto:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="overscroll-auto:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before overscroll-auto::before" /> <element class="content-after overscroll-auto::after" />`	`.overscroll-auto`	Allows the browser's default overscroll behavior (like pull-to-refresh).
overscroll-contain Prevents scroll chaining to parent elements, but keeps local overscroll effects. CSS Rules `.overscroll-contain { overscroll-behavior: contain; }` Usage `<element class="overscroll-contain" />` Responsive Prefix `.overscroll-contain` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:overscroll-contain" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="overscroll-contain:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="overscroll-contain:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before overscroll-contain::before" /> <element class="content-after overscroll-contain::after" />`	`.overscroll-contain`	Prevents scroll chaining to parent elements, but keeps local overscroll effects.
overscroll-none Prevents scroll chaining and local overscroll bounce effects completely. CSS Rules `.overscroll-none { overscroll-behavior: none; }` Usage `<element class="overscroll-none" />` Responsive Prefix `.overscroll-none` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:overscroll-none" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="overscroll-none:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="overscroll-none:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before overscroll-none::before" /> <element class="content-after overscroll-none::after" />`	`.overscroll-none`	Prevents scroll chaining and local overscroll bounce effects completely.
overscroll-y-auto Allows default vertical overscroll behavior. CSS Rules `.overscroll-y-auto { overscroll-behavior-y: auto; }` Usage `<element class="overscroll-y-auto" />` Responsive Prefix `.overscroll-y-auto` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:overscroll-y-auto" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="overscroll-y-auto:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="overscroll-y-auto:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before overscroll-y-auto::before" /> <element class="content-after overscroll-y-auto::after" />`	`.overscroll-y-auto`	Allows default vertical overscroll behavior.
overscroll-y-contain Prevents vertical scroll chaining to parent elements. CSS Rules `.overscroll-y-contain { overscroll-behavior-y: contain; }` Usage `<element class="overscroll-y-contain" />` Responsive Prefix `.overscroll-y-contain` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:overscroll-y-contain" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="overscroll-y-contain:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="overscroll-y-contain:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before overscroll-y-contain::before" /> <element class="content-after overscroll-y-contain::after" />`	`.overscroll-y-contain`	Prevents vertical scroll chaining to parent elements.
overscroll-y-none Prevents vertical scroll chaining and overscroll bounce effects. CSS Rules `.overscroll-y-none { overscroll-behavior-y: none; }` Usage `<element class="overscroll-y-none" />` Responsive Prefix `.overscroll-y-none` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:overscroll-y-none" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="overscroll-y-none:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="overscroll-y-none:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before overscroll-y-none::before" /> <element class="content-after overscroll-y-none::after" />`	`.overscroll-y-none`	Prevents vertical scroll chaining and overscroll bounce effects.
overscroll-x-auto Allows default horizontal overscroll behavior. CSS Rules `.overscroll-x-auto { overscroll-behavior-x: auto; }` Usage `<element class="overscroll-x-auto" />` Responsive Prefix `.overscroll-x-auto` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:overscroll-x-auto" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="overscroll-x-auto:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="overscroll-x-auto:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before overscroll-x-auto::before" /> <element class="content-after overscroll-x-auto::after" />`	`.overscroll-x-auto`	Allows default horizontal overscroll behavior.
overscroll-x-contain Prevents horizontal scroll chaining to parent elements. CSS Rules `.overscroll-x-contain { overscroll-behavior-x: contain; }` Usage `<element class="overscroll-x-contain" />` Responsive Prefix `.overscroll-x-contain` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:overscroll-x-contain" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="overscroll-x-contain:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="overscroll-x-contain:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before overscroll-x-contain::before" /> <element class="content-after overscroll-x-contain::after" />`	`.overscroll-x-contain`	Prevents horizontal scroll chaining to parent elements.
overscroll-x-none Prevents horizontal scroll chaining and overscroll bounce effects. CSS Rules `.overscroll-x-none { overscroll-behavior-x: none; }` Usage `<element class="overscroll-x-none" />` Responsive Prefix `.overscroll-x-none` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:overscroll-x-none" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="overscroll-x-none:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="overscroll-x-none:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before overscroll-x-none::before" /> <element class="content-after overscroll-x-none::after" />`	`.overscroll-x-none`	Prevents horizontal scroll chaining and overscroll bounce effects.