Scrollbar

Default

Used to replace the browser’s native scrollbar.

Use height property to set the height of the scrollbar, or if not set, it adapts according to the parent container height.

Code copied

<template>
  <s-scrollbar height="400px">
    <p v-for="item in 20" :key="item" class="scrollbar-item">{{ item }}</p>
  </s-scrollbar>
</template>

<style scoped lang="scss">
.scrollbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 12px;
  background: rgba(var(--sax-primary), 0.1);
  color: rgba(var(--sax-primary));
}
</style>

Horizontal scroll

When the element width is greater than the scrollbar width, the horizontal scrollbar is displayed.

Code copied

<template>
  <s-scrollbar>
    <div class="scrollbar-flex-content">
      <p v-for="item in 50" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </div>
  </s-scrollbar>
</template>

<style scoped>
.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 12px;
  background: rgba(var(--sax-danger), 0.2);
  color: rgba(var(--sax-danger));
}
</style>

Max height

The scrollbar is displayed only when the element height exceeds the max height.

Code copied

<template>
  <div style="display: flex">
    <s-button type="flat" @click="add">Add Item</s-button>
    <s-button type="flat" @click="onDelete">Delete Item</s-button>
  </div>
  <s-scrollbar max-height="400px">
    <p v-for="item in count" :key="item" class="scrollbar-demo-item">
      {{ item }}
    </p>
  </s-scrollbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const count = ref(3)

const add = () => {
  count.value++
}
const onDelete = () => {
  if (count.value > 0) {
    count.value--
  }
}
</script>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 12px;
  background: rgba(var(--sax-primary), 0.1);
  color: rgba(var(--sax-primary));
}
</style>

Api