Yy Craft

主题

Scrollbar 滚动条 ​

基础用法 ​

查看示例
vue
<template>
  <div style="height: 200px; border: 1px solid #dcdfe6">
    <yy-scrollbar>
      <yy-p v-for="i in 20" :key="i">
        这是一段测试文本 {{ i }}
      </yy-p>
    </yy-scrollbar>
  </div>
</template>

滚动条显示方式 ​

查看示例
vue
<template>
  <div style="height: 200px; border: 1px solid #dcdfe6">
    <yy-scrollbar trigger="none">
      <yy-p v-for="i in 20" :key="i">
        这是一段测试文本 {{ i }}
      </yy-p>
    </yy-scrollbar>
  </div>
</template>

自定义类名和样式 ​

查看示例
vue
<template>
  <div style="height: 200px;">
    <yy-scrollbar
      content-class="custom-content"
      :content-style="{ padding: '10px' }"
    >
      <yy-p v-for="i in 20" :key="i">
        这是一段测试文本 {{ i }}
      </yy-p>
    </yy-scrollbar>
  </div>
</template>

事件 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const scrollRef = ref<HTMLElement | null>(null)

function scrollTo() {
  if (scrollRef.value) {
    scrollRef.value.scrollTo({ top: 100, behavior: 'smooth' })
  }
}

function scrollBy() {
  scrollRef.value?.scrollBy({
    top: 100,
    left: 0,
    behavior: 'smooth',
  })
}
</script>

<template>
  <yy-flex vertical>
    <yy-button @click="scrollBy">
      scrollBy 100
    </yy-button>
    <yy-button @click="scrollTo">
      scrollTo 100
    </yy-button>
    <div style="width: 200px; height: 200px; border: 1px solid #dcdfe6">
      <yy-scrollbar ref="scrollRef">
        <yy-p v-for="i in 20" :key="i" style="width: 300px">
          这是一段测试文本 {{ i }}
        </yy-p>
      </yy-scrollbar>
    </div>
  </yy-flex>
</template>

Props ​

参数说明类型默认值
trigger滚动条显示触发方式'none' | 'hover''hover'
contentClass内容区域的类名string-
contentStyle内容区域的样式StyleValue-