el-scrollbar详解

el-scrollbar 是 Element Plus 框架中的一个组件，用于创建自定义滚动条。它可以包裹任意内容，并提供滚动功能。el-scrollbar 支持水平和垂直滚动，以及自定义滚动条样式和行为。

一。属性

1. native:

   • 用途: 是否使用原生滚动条。
   • 默认值: false

2. tag:

   • 用途: 自定义滚动容器的标签。
   • 默认值: div

3. wrap-style:

   • 用途: 自定义滚动容器的样式。
   • 默认值: []

4. wrap-class:

   • 用途: 自定义滚动容器的类名。
   • 默认值: ''

5. view-class:

   • 用途: 自定义视图区域的类名。
   • 默认值: ''

6. view-style:

   • 用途: 自定义视图区域的样式。
   • 默认值: []

7. noresize:

   • 用途: 是否禁止滚动条自动调整大小。
   • 默认值: false

8. height:

   • 用途: 设置滚动容器的高度。

9. max-height:

   • 用途: 设置滚动容器的最大高度。

10. min-size:

    • 用途: 设置滚动条的最小长度。
    • 默认值: 20

11. always:

    • 用途: 是否总是显示滚动条。
    • 默认值: false

12. ratio:

    • 用途: 设置滚动条的比例。
    • 默认值: '100%'

13. id:

    • 用途: 设置滚动容器的 ID。

二。实例

<template>
  <div>
    <h2>Scrollbar 示例</h2>
    
    <!-- 基本用法 -->
    <el-scrollbar>
      <div style="height: 2000px;">
        <p>基本用法</p>
      </div>
    </el-scrollbar>
    <!-- 使用 el-scrollbar 包裹需要滚动的内容 -->

    <!-- 使用原生滚动条 -->
    <el-scrollbar native>
      <div style="height: 2000px;">
        <p>使用原生滚动条</p>
      </div>
    </el-scrollbar>
    <!-- native 属性设置为 true 时，使用原生滚动条 -->

    <!-- 自定义滚动容器的标签 -->
    <el-scrollbar tag="section">
      <div style="height: 2000px;">
        <p>自定义滚动容器的标签</p>
      </div>
    </el-scrollbar>
    <!-- tag 属性设置滚动容器的标签 -->

    <!-- 自定义滚动容器的样式 -->
    <el-scrollbar :wrap-style="{ backgroundColor: '#f0f0f0' }">
      <div style="height: 2000px;">
        <p>自定义滚动容器的样式</p>
      </div>
    </el-scrollbar>
    <!-- wrap-style 属性设置滚动容器的样式 -->

    <!-- 自定义滚动容器的类名 -->
    <el-scrollbar wrap-class="custom-wrap-class">
      <div style="height: 2000px;">
        <p>自定义滚动容器的类名</p>
      </div>
    </el-scrollbar>
    <!-- wrap-class 属性设置滚动容器的类名 -->

    <!-- 自定义视图区域的类名 -->
    <el-scrollbar view-class="custom-view-class">
      <div style="height: 2000px;">
        <p>自定义视图区域的类名</p>
      </div>
    </el-scrollbar>
    <!-- view-class 属性设置视图区域的类名 -->

    <!-- 自定义视图区域的样式 -->
    <el-scrollbar :view-style="{ backgroundColor: '#ffffff' }">
      <div style="height: 2000px;">
        <p>自定义视图区域的样式</p>
      </div>
    </el-scrollbar>
    <!-- view-style 属性设置视图区域的样式 -->

    <!-- 禁止滚动条自动调整大小 -->
    <el-scrollbar noresize>
      <div style="height: 2000px;">
        <p>禁止滚动条自动调整大小</p>
      </div>
    </el-scrollbar>
    <!-- noresize 属性设置为 true 时，禁止滚动条自动调整大小 -->

    <!-- 设置滚动容器的高度 -->
    <el-scrollbar height="300px">
      <div style="height: 2000px;">
        <p>设置滚动容器的高度</p>
      </div>
    </el-scrollbar>
    <!-- height 属性设置滚动容器的高度 -->

    <!-- 设置滚动容器的最大高度 -->
    <el-scrollbar max-height="300px">
      <div style="height: 2000px;">
        <p>设置滚动容器的最大高度</p>
      </div>
    </el-scrollbar>
    <!-- max-height 属性设置滚动容器的最大高度 -->

    <!-- 设置滚动条的最小长度 -->
    <el-scrollbar :min-size="50">
      <div style="height: 2000px;">
        <p>设置滚动条的最小长度</p>
      </div>
    </el-scrollbar>
    <!-- min-size 属性设置滚动条的最小长度 -->

    <!-- 总是显示滚动条 -->
    <el-scrollbar always>
      <div style="height: 2000px;">
        <p>总是显示滚动条</p>
      </div>
    </el-scrollbar>
    <!-- always 属性设置为 true 时，总是显示滚动条 -->

    <!-- 设置滚动条的比例 -->
    <el-scrollbar ratio="50%">
      <div style="height: 2000px;">
        <p>设置滚动条的比例</p>
      </div>
    </el-scrollbar>
    <!-- ratio 属性设置滚动条的比例 -->

    <!-- 设置滚动容器的 ID -->
    <el-scrollbar id="scrollbar-1">
      <div style="height: 2000px;">
        <p>设置滚动容器的 ID</p>
      </div>
    </el-scrollbar>
    <!-- id 属性设置滚动容器的 ID -->

    <!-- 设置滚动容器的引用 -->
    <el-scrollbar ref="scrollbarRef">
      <div style="height: 2000px;">
        <p>设置滚动容器的引用</p>
      </div>
    </el-scrollbar>
    <!-- ref 属性设置滚动容器的引用 -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
</script>