scroll

Like on, scroll also accepts a single event action as input.

This feature scrolls the element.

Custom elements (e.g. Web Components) can also be made scrollable; all they must do is implement the standard scroll and scrollBy methods.

scroll provides a set of optional attributes for customizing its behavior. These are covered in the sections below.

---

behavior

Warning

Smooth scrolling is disabled because of your system’s motion settings.

You can enable it here:

• Windows: Settings → Accessibility → Visual effects → Animation effects
• macOS: System Settings → Accessibility → Display → Reduce motion
• iOS: Settings → Accessibility → Motion → Reduce Motion
• Android: Settings → System → Accessibility → Remove animations
• Firefox: about:config -> add ui.prefersReducedMotion (number) and set it to 0 or 1. This overrides the system setting.

Specifies whether the scrolling should animate smoothly (smooth), happen instantly in a single jump (instant), or let the browser choose (auto, default).

HTML Result

<button
  type="button"
  class="btn mb3"
  on:click="scrollBehavior"
>
  scroll down
</button>

<div
  class="overflow-y-auto h4"
  scroll="scrollBehavior"
  behavior="smooth"
  top="500"
>
  <div class="h5 bg-red"></div>
  <div class="h5 bg-green"></div>
  <div class="h5 bg-blue"></div>
  <div class="h5 bg-yellow"></div>
</div>

scroll down

---

relative

This is a boolean attribute. When present, scrolling uses relative offsets instead of an absolute position.

HTML Result

<button
  type="button"
  class="btn mb3"
  on:click="scrollRelative"
>
  scroll down
</button>

<div
  class="overflow-y-auto h4"
  scroll="scrollRelative"
  relative
  top="200"
>
  <div class="h5 bg-red"></div>
  <div class="h5 bg-green"></div>
  <div class="h5 bg-blue"></div>
  <div class="h5 bg-yellow"></div>
</div>

scroll down

---

top

Specifies how much to scroll vertically.

Can be set to one of the following:

• a numeric pixel value
• start to scroll all the way to the top
• center to scroll to the middle
• end to scroll all the way to the bottom

HTML Result

<button
  type="button"
  class="btn mb3"
  on:click="scrollTop"
>
  scroll down
</button>

<div
  class="overflow-y-auto h4"
  scroll="scrollTop"
  top="end"
>
  <div class="h5 bg-red"></div>
  <div class="h5 bg-green"></div>
  <div class="h5 bg-blue"></div>
  <div class="h5 bg-yellow"></div>
</div>

scroll down

---

left

Specifies how much to scroll horizontally.

Can be set to one of the following:

• a numeric pixel value
• start to scroll all the way to the left
• center to scroll to the middle
• end to scroll all the way to the right

HTML Result

<button
  type="button"
  class="btn mb3"
  on:click="scrollLeft"
>
  scroll right
</button>

<div
  class="overflow-x-auto nowrap h4"
  scroll="scrollLeft"
  left="center"
>
  <div class="h3 w5 dib bg-red"></div>
  <div class="h3 w5 dib bg-green"></div>
  <div class="h3 w5 dib bg-blue"></div>
  <div class="h3 w5 dib bg-yellow"></div>
</div>

scroll right