ACV Scrollbar

A scrollbar is a UI component that allows users to scroll through content that overflows its container, providing a visual indication of the current scroll position.

Basic usage

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at risus augue. Sed sapien eros, tempus ac felis at, tempus interdum lorem. Aliquam ac sapien a velit maximus eleifend. Aenean a hendrerit elit. Vestibulum massa justo, malesuada sagittis scelerisque eu, mollis gravida tellus. Morbi tincidunt urna eget ex auctor ultricies. Morbi aliquet, ligula vel hendrerit dapibus, lectus quam porta tortor, id porta ante nisi ut lacus. Fusce turpis eros, posuere dapibus lorem at, auctor tincidunt lectus. Curabitur non luctus eros. Nunc id massa risus. Praesent vel tempus purus. Maecenas consequat neque molestie mi venenatis, quis finibus quam maximus. Quisque eleifend posuere leo vel gravida. Nunc sed nulla a sapien dignissim pellentesque. Nam ac tortor ligula. Maecenas nunc neque, malesuada in rutrum imperdiet, sagittis et ipsum. Cras massa ante, molestie at ante nec, luctus gravida justo. Nulla dapibus et magna ut accumsan. Ut vitae massa maximus, vulputate sapien in, varius neque. Nullam et malesuada turpis. Fusce sed ultrices mauris. Donec sed commodo orci. Suspendisse tincidunt fringilla est, at vulputate odio convallis ut. Donec pharetra urna at velit lacinia, quis vulputate metus faucibus. Phasellus est leo, iaculis nec lorem in, consectetur convallis lectus. Fusce velit ante, suscipit et bibendum vulputate, luctus et ex. Vestibulum pulvinar fringilla velit vel tincidunt. Nam eu velit tristique, faucibus tellus et, facilisis ipsum. Mauris pellentesque lacus pharetra aliquam laoreet. Praesent sed semper justo. Donec odio augue, rhoncus non faucibus consectetur, suscipit eget erat. Pellentesque sit amet magna erat. In commodo, lectus vel dignissim ultricies, dui turpis convallis lacus, eu convallis augue eros eu nibh. Vivamus eu egestas odio, quis bibendum augue. Vestibulum gravida vel augue dictum volutpat. In hac habitasse platea dictumst. Nullam scelerisque, sapien non pharetra pellentesque, massa diam sodales quam, vitae fermentum lorem est sit amet mi. Nam justo turpis, aliquam vel lobortis quis, tincidunt nec urna. Curabitur mi risus, porttitor eget auctor posuere, accumsan condimentum est. Maecenas tempor molestie nisl semper convallis. Curabitur euismod vitae tortor id ornare. Maecenas faucibus, sapien at dapibus fringilla, sapien eros rutrum tellus, a elementum arcu sem vitae est. Vivamus condimentum quam posuere ex consequat scelerisque. Duis sed ante purus. Integer varius auctor orci sit amet cursus. Duis lobortis turpis nec mi malesuada ornare. Etiam ullamcorper cursus cursus. Morbi a lacinia tellus. Donec lobortis tincidunt sem, a consequat velit dictum nec. Maecenas mattis leo vitae volutpat ornare. Phasellus ut aliquet lectus. Sed consequat, neque sit amet tincidunt pulvinar, lorem nulla lacinia neque, et ornare metus ante eu sem.

Source code

<script setup>
  import LoremIpsum from '../__data__/data.mock.lorem.js';
  import AcvScrollbar from '@/components/scrollbar/scrollbar.vue';

  function handleScroll() {
    console.log('scroll');
  }
</script>

<template>
  <AcvScrollbar
    class="test"
    @scroll="handleScroll"
  >
    <span class="content">{{ LoremIpsum }}</span>
  </AcvScrollbar>
</template>

<style scoped>
  .test {
    max-height: 300px;
    max-width: 300px;
  }

  .content {
    display: inline-block;
    min-width: 600px;
    padding: 10px;
  }
</style>

Props

Prop name	Description	Type	Values	Default
tag	Tag of the scrollbar	string	-	div
options	Options of the scrollbar see Options	TSTypeReference	-	() => ({})

Slots

Name	Description	Bindings
default