Scroll
Height
The default value is `100%`. Use the height property to set the container's height. Fixed values like `300px` and relative values like `100%` are supported when the parent has an explicit height.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script setup lang="ts">
import { NmorphScroll } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="scroll-height-overview">
<NmorphScroll height="300px" class="docs-scroll__scroll">
<div class="docs-scroll__box" v-for="i in 20" :key="i">{{ i }}</div>
</NmorphScroll>
<div class="docs-scroll__parent nmorph--shadow-inset">
<NmorphScroll height="100%" class="docs-scroll__scroll">
<div class="docs-scroll__box" v-for="i in 20" :key="`full-${i}`">
{{ i }}
</div>
</NmorphScroll>
</div>
</div>
</template>Max height
Scroll is displayed only if the element's height exceeds the maximum height.
1
2
3
4
5
6
7
8
9
10
<script setup lang="ts">
import { NmorphButton, NmorphScroll } from "@nmorph/nmorph-ui-kit";
const elements = ref(10);
const addItem = () => (elements.value += 1);
const removeItem = () => (elements.value -= 1);
</script><template>
<div class="scroll-max-height-overview">
<div class="actions">
<NmorphButton @click="addItem">Add</NmorphButton>
<NmorphButton @click="removeItem">Remove</NmorphButton>
</div>
<NmorphScroll max-height="300px" class="docs-scroll__scroll">
<div class="docs-scroll__box" v-for="i in elements" :key="i">
{{ i }}
</div>
</NmorphScroll>
</div>
</template>Model value
Property for two-way data binding of the model.
0px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script setup lang="ts">
import {
type INmorphScrollExpose,
NmorphSlider,
NmorphScroll,
} from "@nmorph/nmorph-ui-kit";
const elements = 30;
const coords = ref({ x: 0, y: 0 });
const scroll = ref<INmorphScrollExpose | null>(null);
const updateSliderHandler = (value: number) => {
if (scroll.value) scroll.value.moveTo({ x: 0, y: value });
};
const scrollY = computed({
get: () => coords.value.y,
set: updateSliderHandler,
});
</script><template>
<div class="scroll-value-overview">
<div class="slider">
<NmorphSlider
v-model="scrollY"
:show-tooltip="false"
:min="0"
:max="570"
:step="10"
/>
<div class="slider__value">{{ coords.y }}px</div>
</div>
<NmorphScroll
height="300px"
class="scroll"
update-only-on-scroll-end
v-model="coords"
ref="scroll"
>
<div class="scroll__box-item" v-for="i in elements" :key="i">
{{ i }}
</div>
</NmorphScroll>
</div>
</template>Horizontal scroll
If the element's width exceeds the scroll area width, a horizontal scrollbar appears.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script setup lang="ts">
import { NmorphScroll } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="horizontal-scroll-overview">
<NmorphScroll class="scroll" ref="scroll">
<div class="scroll__box-item" v-for="i in 20" :key="i">
{{ i }}
</div>
</NmorphScroll>
</div>
</template>