From 805988eec71e10287012a91cbd0d3269f9541d0b Mon Sep 17 00:00:00 2001
From: Dsaquel <291874700n@gmail.com>
Date: Mon, 26 May 2025 00:56:40 +0200
Subject: [PATCH] wip

---
 docs/en-US/component/scrollbar.md             | 14 +++++
 docs/examples/scrollbar/direction.vue         | 58 +++++++++++++++++++
 .../components/scrollbar/src/scrollbar.ts     |  1 +
 3 files changed, 73 insertions(+)
 create mode 100644 docs/examples/scrollbar/direction.vue

diff --git a/docs/en-US/component/scrollbar.md b/docs/en-US/component/scrollbar.md
index 1e6e0ed57a..ef93c30840 100644
--- a/docs/en-US/component/scrollbar.md
+++ b/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
diff --git a/docs/examples/scrollbar/direction.vue b/docs/examples/scrollbar/direction.vue
new file mode 100644
index 0000000000..d202829f5c
--- /dev/null
+++ b/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>
diff --git a/packages/components/scrollbar/src/scrollbar.ts b/packages/components/scrollbar/src/scrollbar.ts
index 1ec6f29d1b..8d72f66399 100644
--- a/packages/components/scrollbar/src/scrollbar.ts
+++ b/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,