Scroll Area
The Scroll Area component provides a customizable scrollable container with enhanced scrollbar styling using SimpleBar. It supports infinite scrolling, horizontal navigation arrows, reverse scrolling mode, and programmatic scroll control. Perfect for creating scrollable content areas with custom scrollbars, pagination, and advanced scroll interactions.
Basic scroll area
The Scroll Area component creates a scrollable container with custom scrollbar styling. It automatically handles overflow and provides smooth scrolling behavior.
<template>
<IkScrollArea style="height: 300px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;">
<div style="padding: 16px;">
<h3>Scrollable Content</h3>
<p v-for="i in 20" :key="i">
This is paragraph {{ i }}. Scroll down to see more content. The scroll area provides custom scrollbar styling and smooth scrolling behavior.
</p>
</div>
</IkScrollArea>
</template>
<script setup>
import { IkScrollArea } from '@ikol/ui-kit/components/IkScrollArea';
</script>Horizontal arrows
Enable horizontal navigation arrows that appear when content can be scrolled horizontally. The arrows fade in and out based on scroll position.
<template>
<IkScrollArea horizontal_arrows style="height: 250px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;">
<div style="padding: 16px; display: flex; gap: 24px;">
<div v-for="i in 15" :key="i" style="min-width: 200px; padding: 16px; background: var(--background-neutral-regular-default); border-radius: 4px;">
<h4>Card {{ i }}</h4>
<p>Scroll horizontally using the arrows or by dragging.</p>
</div>
</div>
</IkScrollArea>
</template>
<script setup>
import { IkScrollArea } from '@ikol/ui-kit/components/IkScrollArea';
</script>Infinite scroll
Implement infinite scrolling by providing an onIkLoadMore callback and pagination state. The component automatically detects when the user scrolls near the bottom and triggers loading.
<template>
<IkScrollArea
:loading="loading"
:pagination="pagination"
@ik-load-more="loadMore"
style="height: 400px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;"
>
<div style="padding: 16px;">
<h3>Infinite Scroll Example</h3>
<div v-for="item in items" :key="item.id" style="padding: 12px; margin-bottom: 8px; background: var(--background-neutral-weak-default); border-radius: 4px;">
Item {{ item.id }}: {{ item.text }}
</div>
</div>
</IkScrollArea>
</template>
<script setup>
import { IkScrollArea } from '@ikol/ui-kit/components/IkScrollArea';
import { ref } from 'vue';
const items = ref(Array.from({ length: 20 }, (_, i) => ({
id: i + 1,
text: `This is item number ${i + 1}`
})));
const loading = ref(false);
const pagination = ref({
offset: 20,
has_more: true
});
function loadMore() {
if (loading.value || !pagination.value.has_more) return;
loading.value = true;
setTimeout(() => {
const newItems = Array.from({ length: 20 }, (_, i) => ({
id: items.value.length + i + 1,
text: `This is item number ${items.value.length + i + 1}`
}));
items.value.push(...newItems);
pagination.value.offset = items.value.length;
pagination.value.has_more = items.value.length < 100;
loading.value = false;
}, 1000);
}
</script>Reverse scroll mode
Enable reverse scrolling mode where new content is added at the top and the scroll position is automatically maintained. Useful for chat applications or reverse-ordered content.
<template>
<div>
<IkButton @click="addMessage" class="ik-mb-4">Add Message</IkButton>
<IkScrollArea
reverse
style="height: 300px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;"
>
<div style="padding: 16px;">
<div v-for="msg in messages" :key="msg.id" style="padding: 8px; margin-bottom: 8px; background: var(--background-neutral-weak-default); border-radius: 4px;">
<strong>Message {{ msg.id }}:</strong> {{ msg.text }}
</div>
</div>
</IkScrollArea>
</div>
</template>
<script setup>
import { IkScrollArea } from '@ikol/ui-kit/components/IkScrollArea';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { ref } from 'vue';
const messages = ref([
{ id: 1, text: 'First message' },
{ id: 2, text: 'Second message' },
{ id: 3, text: 'Third message' },
]);
let messageId = 4;
function addMessage() {
messages.value.push({
id: messageId++,
text: `New message at ${new Date().toLocaleTimeString()}`
});
}
</script>