Scroll Behavior
Controls the scroll behavior of an element.
| Utility | Properties | Failed to load data. Please try again later. |
|---|
Auto
Initial value
This example sets the scroll behavior to auto. The sb-auto utility allows the default scrolling behavior, which is immediate and without any animation.
<div class="sb-auto ..."></div>Smooth
This example sets the scroll behavior to smooth. The sb-s utility enables a smooth scrolling effect, providing a gradual transition when scrolling to a different part of the page.
<div class="sb-s ..."></div>Conditional styles
Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.
Media modifier
You can combine responsive breakpoints like sm:sb-*,md:sb-*, lg:sb-*, and xxl:sb-* allows targeting specific utilities in different viewports.
<div class="sb-auto md:sb-s ..."></div>Hover modifier
Alternatively, you can apply :hover by using h:sb-* utility to override elements and change their values when hovering over them.
<div class="sb-auto h:sb-s ..."></div>