Flux

Appearance

Scroller ​

A scroll container with custom scrollbar styling, optional fade-mask at the edges, and scroll-snap support. Use it inside fixed-size parents (panes, sidebars, modals) where the default browser scrollbar feels out of place.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Props

direction?: 'horizontal' | 'vertical' | 'both'
The scrollable axis.
Default: vertical

has-fade?: boolean
Apply a fade-mask at the scrollable edges that disappears when the user reaches the start or end.

snap?: 'mandatory' | 'proximity'
Enable scroll-snap on the main axis.

snap-align?: 'start' | 'center' | 'end'
Align direct children to the snap points (sets `scroll-snap-align` on direct children).

tag?: keyof HTMLElementTagNameMap
The HTML tag to use for the scroller.
Default: div

Slots

default
The scrollable content.

Examples ​

Vertical

A vertical scroller with custom scrollbar.

Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
Row 13
Row 14
Row 15
Row 16
Row 17
Row 18
Row 19
Row 20

<template>
    <FluxScroller style="height: 200px; width: 100%; padding: 9px">
        <FluxFlex
            direction="vertical"
            :gap="6">
            <PreviewColumn
                v-for="i in 20"
                :key="i">
                Row {{ i }}
            </PreviewColumn>
        </FluxFlex>
    </FluxScroller>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex, FluxScroller } from '@flux-ui/components';
</script>

Horizontal

A horizontal scroller, useful for card rails.

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12

<template>
    <FluxScroller
        direction="horizontal"
        style="width: 100%; padding: 9px">
        <FluxFlex :gap="9">
            <PreviewColumn
                v-for="i in 12"
                :key="i"
                style="flex: 0 0 160px">
                Card {{ i }}
            </PreviewColumn>
        </FluxFlex>
    </FluxScroller>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex, FluxScroller } from '@flux-ui/components';
</script>

Snap

Combine `direction` and `snap` to create snap-scrolling lists.

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

<template>
    <FluxScroller
        direction="horizontal"
        snap="mandatory"
        snap-align="start"
        style="width: 100%; padding: 9px">
        <FluxFlex :gap="9">
            <PreviewColumn
                v-for="i in 8"
                :key="i"
                style="flex: 0 0 200px; height: 120px">
                Slide {{ i }}
            </PreviewColumn>
        </FluxFlex>
    </FluxScroller>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex, FluxScroller } from '@flux-ui/components';
</script>

Fade

Use `has-fade` to fade out content as it approaches the scrollable edges.

Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
Row 13
Row 14
Row 15
Row 16
Row 17
Row 18
Row 19
Row 20
Row 21
Row 22
Row 23
Row 24
Row 25
Row 26
Row 27
Row 28
Row 29
Row 30

<template>
    <FluxScroller
        has-fade
        style="height: 240px; width: 100%; padding: 18px">
        <FluxFlex
            direction="vertical"
            :gap="6">
            <PreviewColumn
                v-for="i in 30"
                :key="i">
                Row {{ i }}
            </PreviewColumn>
        </FluxFlex>
    </FluxScroller>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex, FluxScroller } from '@flux-ui/components';
</script>