The ScrollSection component allows content to be organized into scrollable sections, ideal for page navigation, storytelling, or section-based layouts.

• Sticky navigation: Sections remain accessible while scrolling.
• Dynamic content: Supports multiple scrollable sections with unique IDs.
• Flexible layout: Works with cards, panels, or full-page sections.
• Customizable styling: Supports inline styles and theming.
• Integrates with reactive data: Can display dynamically generated sections.

Usage Example

Preview

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Section 13

Section 14

Section 15

Section 16

Section 17

Section 18

Section 19

Section 20

Section 21

Section 22

Section 23

Section 24

Section 25

Code

<script lang="ts">
  import {
    Card,
    getSections,
    ScrollSection,
    themeConfig,
    Window
  } from "@fefade-ui/svelte"

  const { colors } = $derived(themeConfig())
  const sections = $derived(getSections())
  const sectionsData = Array.from({ length: 25 }, (_, index) => ({
    reference: `Section ${index + 1}`
  }))
</script>

<Window style="max-height: 300px; overflow-y: scroll;">
  <ScrollSection
    data={sections}
    style="
        position: sticky;
        margin-top: 0;
        top: -16px;
        z-index: 1;
    margin-bottom: 1rem;
    border-radius: 5px;
        "
  >
    {#each sectionsData as { reference }, i (reference)}
      <Card>
        <ScrollSection.Content
          id={reference}
          style="
          height: 100vh;
          padding: 1rem;
          display: flex;
          justify-content: center;
          align-items: center;
          background: {i % 2 ? colors.info : colors.warning};
          "
        >
          <h2>{reference}</h2>
        </ScrollSection.Content>
      </Card>
    {/each}
  </ScrollSection>
</Window>

Props

ScrollSection

Prop	Type	Default	Description
data	array	[]	Array of section objects to render in the scrollable area.
style	string	—	Inline styles for layout or positioning.
class	string	—	Optional CSS classes for custom styling.
id	string	—	Optional unique identifier for the scroll section.

ScrollSection.Content

Prop	Type	Default	Description
id	string	—	Unique ID for the content section, used for navigation.
style	string	—	Inline styles for individual section content.
class	string	—	Optional CSS classes for styling.

Best Practices

• Use unique IDs for each section to enable navigation or linking.
• Keep section content focused to enhance readability while scrolling.
• Use consistent styling for headers and spacing between sections.
• Combine with sticky navigation bars or progress indicators for better UX.
• Avoid overly long sections that may impact scroll performance.