wip

docs/en-US/component/scrollbar.md

@@ -47,6 +47,20 @@ scrollbar/infinite-scroll
 
 :::
 
+## Direction ^(2.9.12)
+
+:::demo You can choose in which direction to use infinite scroll.
+
+scrollbar/direction
+
+:::
+
+:::warning
+
+The direction property is an option from [vueuse](https://vueuse.org/core/useInfiniteScroll/#direction) and it apply the required css.
+
+:::
+
 ## API
 
 ### Attributes

docs/examples/scrollbar/direction.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-scrollbar
+    v-loading="loading"
+    height="400px"
+    :bottom-reached="loadMore"
+    direction="top"
+  >
+    <p v-for="item in num" :key="item" class="scrollbar-demo-item">
+      {{ item }}
+    </p>
+  </el-scrollbar>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const num = ref(20)
+const loading = ref(false)
+function* getItems() {
+  yield 5
+  yield 5
+  yield 5
+}
+const items = getItems()
+
+const loadMore = async () => {
+  console.log('!!')
+  loading.value = true
+  await new Promise((r) => setTimeout(r, 2000))
+  try {
+    const huh = items.next().value
+    console.log(huh)
+    if (!huh) return console.log('what !')
+    console.log('kesk')
+    num.value += huh
+  } finally {
+    loading.value = false
+    console.log('end')
+  }
+}
+</script>
+
+<style scoped>
+.scrollbar-demo-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  margin: 10px;
+  text-align: center;
+  border-radius: 4px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+.el-slider {
+  margin-top: 20px;
+}
+</style>

packages/components/scrollbar/src/scrollbar.ts

@@ -106,6 +106,7 @@ export const scrollbarProps = buildProps({
   },
   /**
    * @description direction to use the infinite scroll
+   * @link https://vueuse.org/core/useInfiniteScroll/#direction
    */
   direction: {
     type: String,