webflow svelte components logoWFS

Scroll area

Scrolling element that maintain consistency across different browsers.

API Reference

Usage

<script lang="ts">
  import { ScrollArea } from '$lib/components/scroll-area';
</script>
<ScrollArea class="scroll-area">
  <div class="scroll-area__container">
    <h2 class="scroll-area__title">Scroll Area</h2>
    <p class="scroll-area__text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu convallis nulla, sed
      egestas sapien. Nulla eleifend sem sed malesuada pellentesque. Sed in tellus est. Sed
      malesuada tellus eu sollicitudin aliquam. <br /><br />
      Donec luctus nibh eu odio sagittis, vitae tristique enim aliquam. Pellentesque nunc ligula, volutpat
      eget blandit eu, congue et justo. In a lacus sodales, porta mi nec, ornare risus. Etiam vel elit
      bibendum, sodales ligula vel, mollis diam.<br /><br />
      Suspendisse vel erat ornare, feugiat nulla vitae, hendrerit magna. Donec viverra risus eget elit
      laoreet, eget viverra nunc molestie. Sed faucibus justo ut massa ullamcorper commodo.
    </p>
  </div>
</ScrollArea>

Properties

The ScrollArea component extends the Bits UI <ScrollArea> component. Find the full list of available properties in the official Bits UI documentation.

Examples

Orientation

Use the orientation property to change the orientation of the scroll area.

On this page