diff --git a/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarH.vue b/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarH.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ec196cb2ebd39260725c6ab560d5adcbb5a14f9f
--- /dev/null
+++ b/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarH.vue
@@ -0,0 +1,42 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 横向滚动条
+
+<!-- en-US -->
+
+### Horizontal scroll bar
+</docs>
+<script setup lang="ts">
+import { ref } from 'vue';
+const container1 = ref();
+const container2 = ref();
+</script>
+<template>
+  <div class="demo-scrollbar-h-wrapper">
+    <div class="container" ref="container1">
+      <div class="section"></div>
+    </div>
+    <OScrollbar :target="container1" :disabledY="true" size="medium" show-type="always" />
+  </div>
+  <div class="demo-scrollbar-h-wrapper">
+    <div class="container" ref="container2">
+      <div class="section"></div>
+    </div>
+    <OScrollbar :target="container2" :disabledY="true" size="small" show-type="always" />
+  </div>
+</template>
+<style lang="scss">
+.demo-scrollbar-h-wrapper {
+  position: relative;
+  margin-bottom: 24px;
+  width: 240px;
+  .container {
+    height: 30px;
+    overflow: auto;
+  }
+  .section {
+    width: 200%;
+  }
+}
+</style>
diff --git a/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarUsage.vue b/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarUsage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f7578527cee8a141f24065478df4bc862f4a13b8
--- /dev/null
+++ b/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarUsage.vue
@@ -0,0 +1,109 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 使用
+
+两种尺寸：`medium`、`small` ；
+
+四种显示方式：`auto`、`always`、`hover`、`never` ；
+
+滚动条显示方式为 `auto` 时,可以通过 `duration` 属性控制滚动条在停止滚动后持续显示的时间；
+
+<!-- en-US -->
+
+Two sizes: `medium`、`small`.
+
+Four display methods: `auto`、`always`、`hover` and `never`.
+
+When the display mode of the scroll bar is `auto`, the duration of the scroll bar's continuous display after it stops scrolling can be controlled through the `duration` attribute.
+
+### Usage
+</docs>
+<script setup lang="ts">
+import { ref } from 'vue';
+const container = ref();
+const showType = ref('always');
+const disabledX = ref(false);
+const disabledY = ref(false);
+const size = ref('medium');
+const duration = ref(600);
+</script>
+<template>
+  <div class="demo-scrollbar-usage-operation">
+    <div class="detail-operation">
+      <span class="operation-des">滚动条显示方式</span>
+      <ORadioGroup v-model="showType">
+        <ORadio value="auto">auto</ORadio>
+        <ORadio value="always">always</ORadio>
+        <ORadio value="hover">hover</ORadio>
+        <ORadio value="never">never</ORadio>
+      </ORadioGroup>
+    </div>
+    <div class="detail-operation">
+      <span class="operation-des">滚动条大小</span>
+      <ORadioGroup v-model="size">
+        <ORadio value="medium">medium</ORadio>
+        <ORadio value="small">small</ORadio>
+      </ORadioGroup>
+    </div>
+    <div class="detail-operation">
+      <span class="operation-des">隐藏横向滚动条</span>
+      <OSwitch v-model="disabledX" />
+    </div>
+    <div class="detail-operation">
+      <span class="operation-des">隐藏纵向滚动条</span>
+      <OSwitch v-model="disabledY" />
+    </div>
+    <div class="detail-operation">
+      <span class="operation-des">控制持续的时间</span>
+      <OInputNumber v-model="duration" autoWidth round="pill" :step="100" />
+    </div>
+  </div>
+  <div class="demo-scrollbar-usage-wrapper">
+    <div class="container" ref="container">
+      <div class="section">1</div>
+      <div class="section">2</div>
+      <div class="section">3</div>
+    </div>
+    <OScrollbar :target="container" :show-type="showType" :disabledX="disabledX" :disabledY="disabledY" :size="size" :duration="duration" />
+  </div>
+</template>
+<style lang="scss">
+.demo-scrollbar-usage-operation {
+  .detail-operation {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+  .operation-des {
+    margin-right: 12px;
+  }
+}
+.demo-scrollbar-usage-wrapper {
+  position: relative;
+  .container {
+    width: 100%;
+    height: 300px;
+    border: 2px solid rgb(111, 45, 234);
+    box-sizing: border-box;
+    overflow: auto;
+  }
+  .section {
+    height: 75%;
+    width: 150%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    &:nth-child(1) {
+      background-color: #a4dcc26e;
+    }
+    &:nth-child(2) {
+      background-color: #6288e66e;
+    }
+    &:nth-child(3) {
+      background-color: #f4f8726e;
+    }
+  }
+}
+</style>
diff --git a/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarV.vue b/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarV.vue
new file mode 100644
index 0000000000000000000000000000000000000000..13b5bd075cc17288ce6f2b72a88c86abd72b4e29
--- /dev/null
+++ b/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarV.vue
@@ -0,0 +1,47 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 纵向滚动条
+
+<!-- en-US -->
+
+### Vertical scroll bar
+</docs>
+<script setup lang="ts">
+import { ref } from 'vue';
+const container1 = ref();
+const container2 = ref();
+</script>
+<template>
+  <div class="demo-scrollbar-v-wrapper">
+    <div class="demo-scrollbar-v">
+      <div class="container" ref="container1">
+        <div class="section"></div>
+      </div>
+      <OScrollbar :target="container1" :disabledX="true" size="medium" show-type="always" />
+    </div>
+    <div class="demo-scrollbar-v">
+      <div class="container" ref="container2">
+        <div class="section"></div>
+      </div>
+      <OScrollbar :target="container2" :disabledX="true" size="small" show-type="always" />
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.demo-scrollbar-v-wrapper {
+  display: flex;
+  .demo-scrollbar-v {
+    position: relative;
+    width: 100px;
+    margin-right: 24px;
+    .container {
+      height: 200px;
+      overflow: auto;
+    }
+    .section {
+      height: 200%;
+    }
+  }
+}
+</style>
diff --git a/packages/opendesign/src/scrollbar/__docs__/index.en-US.md b/packages/opendesign/src/scrollbar/__docs__/index.en-US.md
new file mode 100644
index 0000000000000000000000000000000000000000..352e8a33fc4af95d24ba8f44124a5c61ff04788c
--- /dev/null
+++ b/packages/opendesign/src/scrollbar/__docs__/index.en-US.md
@@ -0,0 +1,16 @@
+---
+sidebar: OScrollbar
+kind: operator
+---
+
+# Scroll bar
+
+## 示例
+
+<!-- @case ScrollbarUsage -->
+<!-- @case:a|k|e ScrollbarH -->
+<!-- @case:a|k|e ScrollbarV -->
+
+## Api
+
+<!-- @api OScrollbar -->
diff --git a/packages/opendesign/src/scrollbar/__docs__/index.zh-CN.md b/packages/opendesign/src/scrollbar/__docs__/index.zh-CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..31262bf8132bc4b1b20c5971c9c3113aa5e33825
--- /dev/null
+++ b/packages/opendesign/src/scrollbar/__docs__/index.zh-CN.md
@@ -0,0 +1,16 @@
+---
+sidebar: OScrollbar 滚动条
+kind: operator
+---
+
+# 滚动条
+
+## 示例
+
+<!-- @case ScrollbarUsage -->
+<!-- @case:a|k|e ScrollbarH -->
+<!-- @case:a|k|e ScrollbarV -->
+
+## Api
+
+<!-- @api OScrollbar -->
diff --git a/packages/opendesign/src/scrollbar/style/theme-ascend.scss b/packages/opendesign/src/scrollbar/style/theme-ascend.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..7dc078e5e4f0ef5332c75acd828c1147d366123b 100644
--- a/packages/opendesign/src/scrollbar/style/theme-ascend.scss
+++ b/packages/opendesign/src/scrollbar/style/theme-ascend.scss
@@ -0,0 +1,7 @@
+.o-scrollbar {
+  --scrollbar-height: 100%;
+}
+
+.o-scrollbar-both {
+  --scrollbar-height: 100%;
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/scrollbar/style/theme-kunpeng.scss b/packages/opendesign/src/scrollbar/style/theme-kunpeng.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..7dc078e5e4f0ef5332c75acd828c1147d366123b 100644
--- a/packages/opendesign/src/scrollbar/style/theme-kunpeng.scss
+++ b/packages/opendesign/src/scrollbar/style/theme-kunpeng.scss
@@ -0,0 +1,7 @@
+.o-scrollbar {
+  --scrollbar-height: 100%;
+}
+
+.o-scrollbar-both {
+  --scrollbar-height: 100%;
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/scrollbar/style/theme-openeuler.scss b/packages/opendesign/src/scrollbar/style/theme-openeuler.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..7dc078e5e4f0ef5332c75acd828c1147d366123b 100644
--- a/packages/opendesign/src/scrollbar/style/theme-openeuler.scss
+++ b/packages/opendesign/src/scrollbar/style/theme-openeuler.scss
@@ -0,0 +1,7 @@
+.o-scrollbar {
+  --scrollbar-height: 100%;
+}
+
+.o-scrollbar-both {
+  --scrollbar-height: 100%;
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/scrollbar/types.ts b/packages/opendesign/src/scrollbar/types.ts
index b3f825505b0c44196929d00081906899e063b8ac..4a594b631397b932c2e722dde849dcef2d489569 100644
--- a/packages/opendesign/src/scrollbar/types.ts
+++ b/packages/opendesign/src/scrollbar/types.ts
@@ -6,53 +6,65 @@ export type ScrollerSizeT = (typeof ScrollerSizeTypes)[number];
 
 export const baseScrollarProps = {
   /**
-   * 禁用横向滚动
+   * @zh-CN 隐藏横向滚动条
+   * @en-US Hide the horizontal scroll bar.
    */
   disabledX: {
     type: Boolean,
-    required: false,
+    required: false as const,
   },
   /**
-   * 禁用纵向滚动
+   * @zh-CN 隐藏纵向滚动条
+   * @en-US Hide the vertical scroll bar.
    */
   disabledY: {
     type: Boolean,
   },
-
   /**
-   * 滚动条在停止滚动多长时间后隐藏, ms
+   * @zh-CN 滚动条在停止滚动多长时间后隐藏, 单位：ms
+   * @en-US How long after the scroll bar stops scrolling is hidden, unit: ms.
+   * @default 600
    */
   duration: {
     type: Number,
     default: 600,
   },
   /**
-   * 滚动条显示控制
+   * @zh-CN 滚动条显示控制
    * always：一直显示
    * auto: 滚动中、滚动后hover滚动条、拖拽时显示
    * hover: 滚动条hover时显示
    * never: 不显示滚动条
+   * @en-US The scroll bar displays the control.
+   * always：Always displayed.
+   * auto: The hover bar is displayed while scrolling, after scrolling, and when dragging.
+   * hover: It is displayed when the scroll bar hovers.
+   * never: The scroll bar is not displayed.
+   * @default 'auto'
    */
   showType: {
     type: String as PropType<'auto' | 'always' | 'hover' | 'never'>,
     default: 'auto',
   },
   /**
-   * 滚动条尺寸大小
+   * @zh-CN 滚动条尺寸大小
+   * @en-US The size of the scroll bar.
+   * @default 'medium'
    */
   size: {
     type: String as PropType<ScrollerSizeT>,
     default: 'medium',
   },
   /**
-   * showType=always时，是否根据滚动容器滚动高度变化自动刷新滚动条
+   * @zh-CN showType = always时，是否根据滚动容器滚动高度变化自动刷新滚动条
+   * @en-US When showType = always, does the scroll bar automatically refresh according to the change in the scroll height of the scroll container.
    */
   autoUpdateOnScrollSize: {
     type: Boolean,
   },
-
   /**
-   * 滚动条尺寸大小
+   * @zh-CN 自定义滚动条类
+   * @en-US Custom scroll bar class.
    */
   barClass: {
     type: String,
@@ -63,7 +75,8 @@ export type BaseScrollerPropsT = ExtractPropTypes<typeof baseScrollarProps>;
 export const scrollerProps = {
   ...baseScrollarProps,
   /**
-   * 滚动容器类
+   * @zh-CN 滚动容器类
+   * @en-US Rolling container class.
    */
   wrapClass: {
     type: [String, Array, Object] as PropType<string | any[] | object>,
@@ -75,7 +88,9 @@ export type ScrollerPropsT = ExtractPropTypes<typeof scrollerProps>;
 export const scrollbarProps = {
   ...baseScrollarProps,
   /**
-   * 滚动关联目标容器,支持body、元素ref、HTMLElement
+   * @zh-CN 滚动关联目标容器,支持body、元素ref、HTMLElement
+   * @en-US Scroll to associate the target container, supporting body, element ref, and HTMLElement.
+   * @default null
    */
   target: {
     type: [String, Object] as PropType<HTMLElement | ComponentPublicInstance | string | null>,