Components / Scroll Area

Scroll Area

Augments native scroll functionality for custom, cross-browser styling. Native overflow keeps keyboard, wheel, and touch scrolling working; the brain reports viewport metrics so the custom thumb tracks position. This preview is the real component running in WebAssembly.

Examples

Tags

v1.2.0-beta.49

v1.2.0-beta.48

v1.2.0-beta.47

v1.2.0-beta.46

v1.2.0-beta.45

v1.2.0-beta.44

v1.2.0-beta.43

v1.2.0-beta.42

v1.2.0-beta.41

v1.2.0-beta.40

v1.2.0-beta.39

v1.2.0-beta.38

v1.2.0-beta.37

v1.2.0-beta.36

v1.2.0-beta.35

v1.2.0-beta.34

v1.2.0-beta.33

v1.2.0-beta.32

v1.2.0-beta.31

v1.2.0-beta.30

v1.2.0-beta.29

v1.2.0-beta.28

v1.2.0-beta.27

v1.2.0-beta.26

v1.2.0-beta.25

v1.2.0-beta.24

v1.2.0-beta.23

v1.2.0-beta.22

v1.2.0-beta.21

v1.2.0-beta.20

v1.2.0-beta.19

v1.2.0-beta.18

v1.2.0-beta.17

v1.2.0-beta.16

v1.2.0-beta.15

v1.2.0-beta.14

v1.2.0-beta.13

v1.2.0-beta.12

v1.2.0-beta.11

v1.2.0-beta.10

v1.2.0-beta.9

v1.2.0-beta.8

v1.2.0-beta.7

v1.2.0-beta.6

v1.2.0-beta.5

v1.2.0-beta.4

v1.2.0-beta.3

v1.2.0-beta.2

v1.2.0-beta.1

v1.2.0-beta.0

razor

<ZitsScrollArea class="h-72 w-48 rounded-md border">
    <div class="p-4">
        <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
        @foreach (var tag in tags)
        {
            <div class="text-sm">@tag</div>
            <ZitsSeparator class="my-2" />
        }
    </div>
</ZitsScrollArea>

Installation

Terminal bash

navius add scroll-area

API reference

Prop	Type	Default
Type	string	"hover"
ScrollHideDelay	int	600
Dir	string?	-
Scrollbars	RenderFragment?	-
Orientation (ZitsScrollBar)	string	"vertical"