scrollBar

Scroll bar component

Basic usage

height Set the height of the scrolling area

html

<template>
  <dk-scrollbar height="200px">
    <div class="content">
      <div class="item" v-for="item in 20" :key="item">{{item}}</div>
    </div>
  </dk-scrollbar>
</template>
<style lang="scss" scoped>
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: rgba($color: #1cb1a4, $alpha: 0.5);
    color: #fff;
  }
</style>

展开

Horizontal scrolling

When the width of the element is greater than the width of the scrolling area, the scrollbar will automatically appear as a horizontal scrollbar.

html

<template>
  <dk-scrollbar height="200px">
    <div class="content">
      <div class="item" v-for="item in 20" :key="item">{{item}}</div>
    </div>
  </dk-scrollbar>
</template>
<style lang="scss" scoped>
  .content {
    width: fit-content;
    display: flex;
    .item {
      width: 50px;
      height: 50px;
      display: flex;
      margin: 10px;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-radius: 4px;
      background: rgba($color: #1cb1a4, $alpha: 0.5);
      color: #fff;
    }
  }
</style>

展开

v-dk-scroll instructions

Setting the v-dk-scroll instruction can also achieve scrolling style, with the same attributes and components.

html

<template>
  <div v-dk-scroll="true" height="200px">
    <div class="item" v-for="item in 20" :key="item">{{item}}</div>
  </div>
</template>
<style lang="scss" scoped>
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: rgba($color: #1cb1a4, $alpha: 0.5);
    color: #fff;
  }
</style>

展开

attribute

parameter	explain	type	Optional values	Default value
`height`	Scrolling area height	`string`	-	-
`width`	Scrolling area width	`string`	-	-
`bar-width`	Scroll bar width	`string`	-	`6px`
`track-color`	Scroll bar track color	`string`	-	`transparent`
`thumb-color`	Scroll bar slider color	`string`	-	`#c1c1c1`
`thumb-radius`	Scroll bar slider rounded corners	`string`	-	`4px`
`v-dk-scroll`	instructions	`boolean`	-	`false`