# ScrollContainer

参考 `element-ui` 的 el-scrollbar 组件实现

滚动容器组件

## 代码演示

### 基础滚动

<CodePreview src="/doc-comp/scroll/basic" :height="450">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper title="滚动组件示例" content="基于el-scrollbar">
    <div class="scroll-wrap">
      <ScrollContainer class="mt-4">
        <ul class="p-3">
          <template v-for="index in 100" :key="index">
            <li class="p-2" :style="{ border: '1px solid #eee' }">
              {{ index }}
            </li>
          </template>
        </ul>
      </ScrollContainer>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '@eciol/ant-ui';
  import { ScrollContainer } from '@eciol/share-ui';
</script>
<style lang="less" scoped>
  .scroll-wrap {
    width: 50%;
    height: 300px;
    background-color: @component-background;
  }
</style>

```
</details>
</CodePreview>

### 滚动函数

<CodePreview src="/doc-comp/scroll/action" :height="500">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper title="滚动组件函数示例" content="基于el-scrollbar">
    <div class="my-4">
      <a-button class="mr-2" @click="scrollTo(100)"> 滚动到100px位置 </a-button>
      <a-button class="mr-2" @click="scrollTo(800)"> 滚动到800px位置 </a-button>
      <a-button class="mr-2" @click="scrollTo(0)"> 滚动到顶部 </a-button>
      <a-button class="mr-2" @click="scrollBottom()"> 滚动到底部 </a-button>
    </div>
    <div class="scroll-wrap">
      <ScrollContainer ref="scrollRef" class="mt-4">
        <ul class="p-3">
          <template v-for="index in 100" :key="index">
            <li class="p-2" :style="{ border: '1px solid #eee' }">
              {{ index }}
            </li>
          </template>
        </ul>
      </ScrollContainer>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '@eciol/ant-ui';
  import { ScrollActionType, ScrollContainer } from '@eciol/share-ui';
  import { type Nullable } from '@eciol/types';

  const scrollRef = ref<Nullable<ScrollActionType>>(null);
  const getScroll = () => {
    const scroll = unref(scrollRef);
    if (!scroll) {
      throw new Error('scroll is Null');
    }
    return scroll;
  };

  function scrollTo(top: number) {
    getScroll().scrollTo(top);
  }
  function scrollBottom() {
    getScroll().scrollBottom();
  }
</script>
<style lang="less" scoped>
  .scroll-wrap {
    width: 50%;
    height: 300px;
    background-color: @component-background;
  }
</style>

```
</details>
</CodePreview>

## Usage

```vue
<template>
  <div class="p-4">
    <div class="my-4">
      <a-button @click="scrollTo(100)">滚动到100px位置</a-button>
      <a-button @click="scrollTo(800)">滚动到800px位置</a-button>
      <a-button @click="scrollTo(0)">滚动到顶部</a-button>
      <a-button @click="scrollBottom()">滚动到底部</a-button>
    </div>
    <div class="scroll-wrap">
      <ScrollContainer ref="scrollRef">
        <ul>
          <template v-for="index in 100" :key="index">
            <li>{{ index }}</li>
          </template>
        </ul>
      </ScrollContainer>
    </div>
  </div>
</template>
<script lang="ts"  setup>
  import { CollapseContainer, ScrollContainer, ScrollActionType } from '@eciol/share-ui';

  const scrollRef = ref<Nullable<ScrollActionType>>(null);
  const getScroll = () => {
    const scroll = unref(scrollRef);
    if (!scroll) {
      throw new Error('scroll is Null');
    }
    return scroll;
  };

  function scrollTo(top: number) {
    getScroll()?.scrollTo(top);
  }

  function scrollBottom() {
    getScroll()?.scrollBottom();
  }
</script>
<style lang="less" scoped>
  .scroll-wrap {
    width: 50%;
    height: 300px;
    background: #fff;
  }
</style>
```

## Methods

| 名称          | 回调参数                             | 说明            |
| ------------- | ------------------------------------ | --------------- |
| getScrollWrap | `()=>HtmlElement`                    | 获取滚动容器 el |
| scrollBottom  | `Function`                           | 滚动到底部      |
| scrollTo      | `Function(to:number,duration = 500)` | 滚动到指定位置  |

## Slots

| 名称    | 说明     |
| ------- | -------- |
| default | 默认区域 |