diff --git a/db/TDesign.db b/db/TDesign.db
index b3394ecc7..c2ecea0ae 100644
Binary files a/db/TDesign.db and b/db/TDesign.db differ
diff --git a/packages/products/tdesign-react/packages/components/scrollbar/defaultProps.ts b/packages/products/tdesign-react/packages/components/scrollbar/defaultProps.ts
new file mode 100644
index 000000000..5bddc8a56
--- /dev/null
+++ b/packages/products/tdesign-react/packages/components/scrollbar/defaultProps.ts
@@ -0,0 +1,14 @@
+/**
+ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdScrollbarProps } from './type';
+
+export const scrollbarDefaultProps: TdScrollbarProps = {
+ autoExpand: true,
+ disabled: false,
+ noResize: false,
+ role: 'scrollbar',
+ thumbMinSize: 20,
+ visibility: 'hover',
+};
diff --git a/packages/products/tdesign-react/packages/components/scrollbar/scrollbar.en-US.md b/packages/products/tdesign-react/packages/components/scrollbar/scrollbar.en-US.md
new file mode 100644
index 000000000..17e2e3a57
--- /dev/null
+++ b/packages/products/tdesign-react/packages/components/scrollbar/scrollbar.en-US.md
@@ -0,0 +1,34 @@
+:: BASE_DOC ::
+
+## API
+
+### Scrollbar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets),Typescript: `React.CSSProperties` | N
+ariaLabel | String | - | aria-label text in view layer | N
+autoExpand | Boolean | true | Should the scrollbar expand outwards when hovering (to increase the interactive hotspot)? | N
+container | Object | - | Set the maximum height/width of the scrolling container.。Typescript: `ScrollbarContainerProps` | N
+disabled | Boolean | false | disabled scroll | N
+id | String | - | ID of the view layer | N
+noResize | Boolean | false | Does the container size respond to changes? (If the container size is constant, enabling this feature can optimize performance.) | N
+role | String | scrollbar | WAI-ARIA role in the view layer | N
+step | Object | - | Rolling step。Typescript: `{x?:number;y?:number}` | N
+tabindex | String / Number | - | tabindex of the container | N
+thumbMinSize | Number | 20 | Minimum size (px) of the scroll bar slider. | N
+viewClass | String | - | Custom class name for the view (content area) | N
+visibility | String | hover | Scroll bar display format。options: always/hover/hide | N
+wrapClass | String | - | Custom class name of the wrapper container | N
+onScroll | Function | | Typescript: `(context:{e:Event}) => void`
Triggered while scrolling | N
+
+### ScrollbarInstanceFunctions 组件实例方法
+
+name | params | return | description
+-- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets),Typescript: `React.CSSProperties` | N
+getValues | \- | `PositionValues ` | required。Get the view object containing complete scrolling information。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/scrollbar/type.ts)。
` interface PositionValues { left:number,top: number,scrollLeft:number,scrollTop:number,scrollWidth:number,scrollHeight:number, clientWidth:number,clientHeight:number }`
+scrollTo | `(options: { top?: number; left?: number; behavior?: ScrollBehavior })` | \- | required。Scroll to a specific set of coordinates。Typescript: `ScrollToFn` `type ScrollToFn = { (x: number, y: number): void; (options: { top?: number; left?: number; behavior?: ScrollBehavior }): void; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/scrollbar/type.ts)
+scrollToEdge | `(position:PositionEdge) ` | \- | required。Scroll to one side。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/scrollbar/type.ts)。
`type PositionEdge = "left"\|"right"\|"top"\|"bottom"`
diff --git a/packages/products/tdesign-react/packages/components/scrollbar/scrollbar.md b/packages/products/tdesign-react/packages/components/scrollbar/scrollbar.md
new file mode 100644
index 000000000..d2bfaf72c
--- /dev/null
+++ b/packages/products/tdesign-react/packages/components/scrollbar/scrollbar.md
@@ -0,0 +1,34 @@
+:: BASE_DOC ::
+
+## API
+
+### Scrollbar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式,TS 类型:`React.CSSProperties` | N
+ariaLabel | String | - | 视图层的 aria-label 文本 | N
+autoExpand | Boolean | true | 滚动条 hover 时是否向外扩展(增加交互热区) | N
+container | Object | - | 设置滚动容器的最大高度/宽度。TS 类型:`ScrollbarContainerProps` | N
+disabled | Boolean | false | 禁止滚动 | N
+id | String | - | 视图层的 ID | N
+noResize | Boolean | false | 容器尺寸是否响应变化(若容器尺寸恒定,开启可优化性能) | N
+role | String | scrollbar | 视图层的 WAI-ARIA 角色 | N
+step | Object | - | 滚动步长。TS 类型:`{x?:number;y?:number}` | N
+tabindex | String / Number | - | 包裹容器的 tabindex | N
+thumbMinSize | Number | 20 | 滚动条滑块的最小尺寸(px) | N
+viewClass | String | - | 视图(内容区)的自定义类名 | N
+visibility | String | hover | 滚动条的显示形式。可选项:always/hover/hide | N
+wrapClass | String | - | 包裹容器的自定义类名 | N
+onScroll | Function | | TS 类型:`(context:{e:Event}) => void`
滚动时触发 | N
+
+### ScrollbarInstanceFunctions 组件实例方法
+
+名称 | 参数 | 返回值 | 描述
+-- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式,TS 类型:`React.CSSProperties` | N
+getValues | \- | `PositionValues ` | 必需。获取包含完整滚动信息的视图对象。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/scrollbar/type.ts)。
` interface PositionValues { left:number,top: number,scrollLeft:number,scrollTop:number,scrollWidth:number,scrollHeight:number, clientWidth:number,clientHeight:number }`
+scrollTo | `(options: { top?: number; left?: number; behavior?: ScrollBehavior })` | \- | 必需。滚动到一组特定坐标。TS 类型:`ScrollToFn` `type ScrollToFn = { (x: number, y: number): void; (options: { top?: number; left?: number; behavior?: ScrollBehavior }): void; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/scrollbar/type.ts)
+scrollToEdge | `(position:PositionEdge) ` | \- | 必需。滚动到某一边。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/scrollbar/type.ts)。
`type PositionEdge = "left"\|"right"\|"top"\|"bottom"`
diff --git a/packages/products/tdesign-react/packages/components/scrollbar/type.ts b/packages/products/tdesign-react/packages/components/scrollbar/type.ts
new file mode 100644
index 000000000..bab94ddd7
--- /dev/null
+++ b/packages/products/tdesign-react/packages/components/scrollbar/type.ts
@@ -0,0 +1,108 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdScrollbarProps {
+ /**
+ * 视图层的 aria-label 文本
+ * @default ''
+ */
+ ariaLabel?: string;
+ /**
+ * 滚动条 hover 时是否向外扩展(增加交互热区)
+ * @default true
+ */
+ autoExpand?: boolean;
+ /**
+ * 设置滚动容器的最大高度/宽度
+ */
+ container?: ScrollbarContainerProps;
+ /**
+ * 禁止滚动
+ * @default false
+ */
+ disabled?: boolean;
+ /**
+ * 视图层的 ID
+ * @default ''
+ */
+ id?: string;
+ /**
+ * 容器尺寸是否响应变化(若容器尺寸恒定,开启可优化性能)
+ * @default false
+ */
+ noResize?: boolean;
+ /**
+ * 视图层的 WAI-ARIA 角色
+ * @default scrollbar
+ */
+ role?: string;
+ /**
+ * 滚动步长
+ */
+ step?: { x?: number; y?: number };
+ /**
+ * 包裹容器的 tabindex
+ */
+ tabindex?: string | number;
+ /**
+ * 滚动条滑块的最小尺寸(px)
+ * @default 20
+ */
+ thumbMinSize?: number;
+ /**
+ * 视图(内容区)的自定义类名
+ * @default ''
+ */
+ viewClass?: string;
+ /**
+ * 滚动条的显示形式
+ * @default hover
+ */
+ visibility?: 'always' | 'hover' | 'hide';
+ /**
+ * 包裹容器的自定义类名
+ * @default ''
+ */
+ wrapClass?: string;
+ /**
+ * 滚动时触发
+ */
+ onScroll?: (context: { e: Event }) => void;
+}
+
+/** 组件实例方法 */
+export interface ScrollbarInstanceFunctions {
+ /**
+ * 获取包含完整滚动信息的视图对象
+ */
+ getValues: () => PositionValues;
+ /**
+ * 滚动到一组特定坐标
+ */
+ scrollTo: (options: { top?: number; left?: number; behavior?: ScrollBehavior }) => void;
+ /**
+ * 滚动到某一边
+ */
+ scrollToEdge: (position: PositionEdge) => void;
+}
+
+export interface PositionValues {
+ left: number;
+ top: number;
+ scrollLeft: number;
+ scrollTop: number;
+ scrollWidth: number;
+ scrollHeight: number;
+ clientWidth: number;
+ clientHeight: number;
+}
+
+export type ScrollToFn = {
+ (x: number, y: number): void;
+ (options: { top?: number; left?: number; behavior?: ScrollBehavior }): void;
+};
+
+export type PositionEdge = 'left' | 'right' | 'top' | 'bottom';
diff --git a/packages/products/tdesign-vue-next/packages/components/scrollbar/props.ts b/packages/products/tdesign-vue-next/packages/components/scrollbar/props.ts
new file mode 100644
index 000000000..363ce51aa
--- /dev/null
+++ b/packages/products/tdesign-vue-next/packages/components/scrollbar/props.ts
@@ -0,0 +1,73 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdScrollbarProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+ /** 视图层的 aria-label 文本 */
+ ariaLabel: {
+ type: String,
+ default: '',
+ },
+ /** 滚动条 hover 时是否向外扩展(增加交互热区) */
+ autoExpand: {
+ type: Boolean,
+ default: true,
+ },
+ /** 设置滚动容器的最大高度/宽度 */
+ container: {
+ type: Object as PropType,
+ },
+ /** 禁止滚动 */
+ disabled: Boolean,
+ /** 视图层的 ID */
+ id: {
+ type: String,
+ default: '',
+ },
+ /** 容器尺寸是否响应变化(若容器尺寸恒定,开启可优化性能) */
+ noResize: Boolean,
+ /** 视图层的 WAI-ARIA 角色 */
+ role: {
+ type: String,
+ default: 'scrollbar',
+ },
+ /** 滚动步长 */
+ step: {
+ type: Object as PropType,
+ },
+ /** 包裹容器的 tabindex */
+ tabindex: {
+ type: [String, Number] as PropType,
+ },
+ /** 滚动条滑块的最小尺寸(px) */
+ thumbMinSize: {
+ type: Number,
+ default: 20,
+ },
+ /** 视图(内容区)的自定义类名 */
+ viewClass: {
+ type: String,
+ default: '',
+ },
+ /** 滚动条的显示形式 */
+ visibility: {
+ type: String as PropType,
+ default: 'hover' as TdScrollbarProps['visibility'],
+ validator(val: TdScrollbarProps['visibility']): boolean {
+ if (!val) return true;
+ return ['always', 'hover', 'hide'].includes(val);
+ },
+ },
+ /** 包裹容器的自定义类名 */
+ wrapClass: {
+ type: String,
+ default: '',
+ },
+ /** 滚动时触发 */
+ onScroll: Function as PropType,
+};
diff --git a/packages/products/tdesign-vue-next/packages/components/scrollbar/scrollbar.en-US.md b/packages/products/tdesign-vue-next/packages/components/scrollbar/scrollbar.en-US.md
new file mode 100644
index 000000000..d5c13a0fd
--- /dev/null
+++ b/packages/products/tdesign-vue-next/packages/components/scrollbar/scrollbar.en-US.md
@@ -0,0 +1,36 @@
+:: BASE_DOC ::
+
+## API
+
+### Scrollbar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+ariaLabel | String | - | aria-label text in view layer | N
+autoExpand | Boolean | true | Should the scrollbar expand outwards when hovering (to increase the interactive hotspot)? | N
+container | Object | - | Set the maximum height/width of the scrolling container.。Typescript: `ScrollbarContainerProps` | N
+disabled | Boolean | false | disabled scroll | N
+id | String | - | ID of the view layer | N
+noResize | Boolean | false | Does the container size respond to changes? (If the container size is constant, enabling this feature can optimize performance.) | N
+role | String | scrollbar | WAI-ARIA role in the view layer | N
+step | Object | - | Rolling step。Typescript: `{x?:number;y?:number}` | N
+tabindex | String / Number | - | tabindex of the container | N
+thumbMinSize | Number | 20 | Minimum size (px) of the scroll bar slider. | N
+viewClass | String | - | Custom class name for the view (content area) | N
+visibility | String | hover | Scroll bar display format。options: always/hover/hide | N
+wrapClass | String | - | Custom class name of the wrapper container | N
+onScroll | Function | | Typescript: `(context:{e:Event}) => void`
Triggered while scrolling | N
+
+### Scrollbar Events
+
+name | params | description
+-- | -- | --
+scroll | `(context:{e:Event})` | Triggered while scrolling
+
+### ScrollbarInstanceFunctions 组件实例方法
+
+name | params | return | description
+-- | -- | -- | --
+getValues | \- | `PositionValues ` | required。Get the view object containing complete scrolling information。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/scrollbar/type.ts)。
` interface PositionValues { left:number,top: number,scrollLeft:number,scrollTop:number,scrollWidth:number,scrollHeight:number, clientWidth:number,clientHeight:number }`
+scrollTo | `(options: { top?: number; left?: number; behavior?: ScrollBehavior })` | \- | required。Scroll to a specific set of coordinates。Typescript: `ScrollToFn` `type ScrollToFn = { (x: number, y: number): void; (options: { top?: number; left?: number; behavior?: ScrollBehavior }): void; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/scrollbar/type.ts)
+scrollToEdge | `(position:PositionEdge) ` | \- | required。Scroll to one side。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/scrollbar/type.ts)。
`type PositionEdge = "left"\|"right"\|"top"\|"bottom"`
diff --git a/packages/products/tdesign-vue-next/packages/components/scrollbar/scrollbar.md b/packages/products/tdesign-vue-next/packages/components/scrollbar/scrollbar.md
new file mode 100644
index 000000000..cb19bbb70
--- /dev/null
+++ b/packages/products/tdesign-vue-next/packages/components/scrollbar/scrollbar.md
@@ -0,0 +1,36 @@
+:: BASE_DOC ::
+
+## API
+
+### Scrollbar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+ariaLabel | String | - | 视图层的 aria-label 文本 | N
+autoExpand | Boolean | true | 滚动条 hover 时是否向外扩展(增加交互热区) | N
+container | Object | - | 设置滚动容器的最大高度/宽度。TS 类型:`ScrollbarContainerProps` | N
+disabled | Boolean | false | 禁止滚动 | N
+id | String | - | 视图层的 ID | N
+noResize | Boolean | false | 容器尺寸是否响应变化(若容器尺寸恒定,开启可优化性能) | N
+role | String | scrollbar | 视图层的 WAI-ARIA 角色 | N
+step | Object | - | 滚动步长。TS 类型:`{x?:number;y?:number}` | N
+tabindex | String / Number | - | 包裹容器的 tabindex | N
+thumbMinSize | Number | 20 | 滚动条滑块的最小尺寸(px) | N
+viewClass | String | - | 视图(内容区)的自定义类名 | N
+visibility | String | hover | 滚动条的显示形式。可选项:always/hover/hide | N
+wrapClass | String | - | 包裹容器的自定义类名 | N
+onScroll | Function | | TS 类型:`(context:{e:Event}) => void`
滚动时触发 | N
+
+### Scrollbar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+scroll | `(context:{e:Event})` | 滚动时触发
+
+### ScrollbarInstanceFunctions 组件实例方法
+
+名称 | 参数 | 返回值 | 描述
+-- | -- | -- | --
+getValues | \- | `PositionValues ` | 必需。获取包含完整滚动信息的视图对象。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/scrollbar/type.ts)。
` interface PositionValues { left:number,top: number,scrollLeft:number,scrollTop:number,scrollWidth:number,scrollHeight:number, clientWidth:number,clientHeight:number }`
+scrollTo | `(options: { top?: number; left?: number; behavior?: ScrollBehavior })` | \- | 必需。滚动到一组特定坐标。TS 类型:`ScrollToFn` `type ScrollToFn = { (x: number, y: number): void; (options: { top?: number; left?: number; behavior?: ScrollBehavior }): void; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/scrollbar/type.ts)
+scrollToEdge | `(position:PositionEdge) ` | \- | 必需。滚动到某一边。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/scrollbar/type.ts)。
`type PositionEdge = "left"\|"right"\|"top"\|"bottom"`
diff --git a/packages/products/tdesign-vue-next/packages/components/scrollbar/type.ts b/packages/products/tdesign-vue-next/packages/components/scrollbar/type.ts
new file mode 100644
index 000000000..bab94ddd7
--- /dev/null
+++ b/packages/products/tdesign-vue-next/packages/components/scrollbar/type.ts
@@ -0,0 +1,108 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdScrollbarProps {
+ /**
+ * 视图层的 aria-label 文本
+ * @default ''
+ */
+ ariaLabel?: string;
+ /**
+ * 滚动条 hover 时是否向外扩展(增加交互热区)
+ * @default true
+ */
+ autoExpand?: boolean;
+ /**
+ * 设置滚动容器的最大高度/宽度
+ */
+ container?: ScrollbarContainerProps;
+ /**
+ * 禁止滚动
+ * @default false
+ */
+ disabled?: boolean;
+ /**
+ * 视图层的 ID
+ * @default ''
+ */
+ id?: string;
+ /**
+ * 容器尺寸是否响应变化(若容器尺寸恒定,开启可优化性能)
+ * @default false
+ */
+ noResize?: boolean;
+ /**
+ * 视图层的 WAI-ARIA 角色
+ * @default scrollbar
+ */
+ role?: string;
+ /**
+ * 滚动步长
+ */
+ step?: { x?: number; y?: number };
+ /**
+ * 包裹容器的 tabindex
+ */
+ tabindex?: string | number;
+ /**
+ * 滚动条滑块的最小尺寸(px)
+ * @default 20
+ */
+ thumbMinSize?: number;
+ /**
+ * 视图(内容区)的自定义类名
+ * @default ''
+ */
+ viewClass?: string;
+ /**
+ * 滚动条的显示形式
+ * @default hover
+ */
+ visibility?: 'always' | 'hover' | 'hide';
+ /**
+ * 包裹容器的自定义类名
+ * @default ''
+ */
+ wrapClass?: string;
+ /**
+ * 滚动时触发
+ */
+ onScroll?: (context: { e: Event }) => void;
+}
+
+/** 组件实例方法 */
+export interface ScrollbarInstanceFunctions {
+ /**
+ * 获取包含完整滚动信息的视图对象
+ */
+ getValues: () => PositionValues;
+ /**
+ * 滚动到一组特定坐标
+ */
+ scrollTo: (options: { top?: number; left?: number; behavior?: ScrollBehavior }) => void;
+ /**
+ * 滚动到某一边
+ */
+ scrollToEdge: (position: PositionEdge) => void;
+}
+
+export interface PositionValues {
+ left: number;
+ top: number;
+ scrollLeft: number;
+ scrollTop: number;
+ scrollWidth: number;
+ scrollHeight: number;
+ clientWidth: number;
+ clientHeight: number;
+}
+
+export type ScrollToFn = {
+ (x: number, y: number): void;
+ (options: { top?: number; left?: number; behavior?: ScrollBehavior }): void;
+};
+
+export type PositionEdge = 'left' | 'right' | 'top' | 'bottom';
diff --git a/packages/products/tdesign-vue/src/scrollbar/props.ts b/packages/products/tdesign-vue/src/scrollbar/props.ts
new file mode 100644
index 000000000..363ce51aa
--- /dev/null
+++ b/packages/products/tdesign-vue/src/scrollbar/props.ts
@@ -0,0 +1,73 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdScrollbarProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+ /** 视图层的 aria-label 文本 */
+ ariaLabel: {
+ type: String,
+ default: '',
+ },
+ /** 滚动条 hover 时是否向外扩展(增加交互热区) */
+ autoExpand: {
+ type: Boolean,
+ default: true,
+ },
+ /** 设置滚动容器的最大高度/宽度 */
+ container: {
+ type: Object as PropType,
+ },
+ /** 禁止滚动 */
+ disabled: Boolean,
+ /** 视图层的 ID */
+ id: {
+ type: String,
+ default: '',
+ },
+ /** 容器尺寸是否响应变化(若容器尺寸恒定,开启可优化性能) */
+ noResize: Boolean,
+ /** 视图层的 WAI-ARIA 角色 */
+ role: {
+ type: String,
+ default: 'scrollbar',
+ },
+ /** 滚动步长 */
+ step: {
+ type: Object as PropType,
+ },
+ /** 包裹容器的 tabindex */
+ tabindex: {
+ type: [String, Number] as PropType,
+ },
+ /** 滚动条滑块的最小尺寸(px) */
+ thumbMinSize: {
+ type: Number,
+ default: 20,
+ },
+ /** 视图(内容区)的自定义类名 */
+ viewClass: {
+ type: String,
+ default: '',
+ },
+ /** 滚动条的显示形式 */
+ visibility: {
+ type: String as PropType,
+ default: 'hover' as TdScrollbarProps['visibility'],
+ validator(val: TdScrollbarProps['visibility']): boolean {
+ if (!val) return true;
+ return ['always', 'hover', 'hide'].includes(val);
+ },
+ },
+ /** 包裹容器的自定义类名 */
+ wrapClass: {
+ type: String,
+ default: '',
+ },
+ /** 滚动时触发 */
+ onScroll: Function as PropType,
+};
diff --git a/packages/products/tdesign-vue/src/scrollbar/scrollbar.en-US.md b/packages/products/tdesign-vue/src/scrollbar/scrollbar.en-US.md
new file mode 100644
index 000000000..10368ab88
--- /dev/null
+++ b/packages/products/tdesign-vue/src/scrollbar/scrollbar.en-US.md
@@ -0,0 +1,36 @@
+:: BASE_DOC ::
+
+## API
+
+### Scrollbar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+ariaLabel | String | - | aria-label text in view layer | N
+autoExpand | Boolean | true | Should the scrollbar expand outwards when hovering (to increase the interactive hotspot)? | N
+container | Object | - | Set the maximum height/width of the scrolling container.。Typescript: `ScrollbarContainerProps` | N
+disabled | Boolean | false | disabled scroll | N
+id | String | - | ID of the view layer | N
+noResize | Boolean | false | Does the container size respond to changes? (If the container size is constant, enabling this feature can optimize performance.) | N
+role | String | scrollbar | WAI-ARIA role in the view layer | N
+step | Object | - | Rolling step。Typescript: `{x?:number;y?:number}` | N
+tabindex | String / Number | - | tabindex of the container | N
+thumbMinSize | Number | 20 | Minimum size (px) of the scroll bar slider. | N
+viewClass | String | - | Custom class name for the view (content area) | N
+visibility | String | hover | Scroll bar display format。options: always/hover/hide | N
+wrapClass | String | - | Custom class name of the wrapper container | N
+onScroll | Function | | Typescript: `(context:{e:Event}) => void`
Triggered while scrolling | N
+
+### Scrollbar Events
+
+name | params | description
+-- | -- | --
+scroll | `(context:{e:Event})` | Triggered while scrolling
+
+### ScrollbarInstanceFunctions 组件实例方法
+
+name | params | return | description
+-- | -- | -- | --
+getValues | \- | `PositionValues ` | required。Get the view object containing complete scrolling information。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/scrollbar/type.ts)。
` interface PositionValues { left:number,top: number,scrollLeft:number,scrollTop:number,scrollWidth:number,scrollHeight:number, clientWidth:number,clientHeight:number }`
+scrollTo | `(options: { top?: number; left?: number; behavior?: ScrollBehavior })` | \- | required。Scroll to a specific set of coordinates。Typescript: `ScrollToFn` `type ScrollToFn = { (x: number, y: number): void; (options: { top?: number; left?: number; behavior?: ScrollBehavior }): void; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/scrollbar/type.ts)
+scrollToEdge | `(position:PositionEdge) ` | \- | required。Scroll to one side。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/scrollbar/type.ts)。
`type PositionEdge = "left"\|"right"\|"top"\|"bottom"`
diff --git a/packages/products/tdesign-vue/src/scrollbar/scrollbar.md b/packages/products/tdesign-vue/src/scrollbar/scrollbar.md
new file mode 100644
index 000000000..353d5ad2b
--- /dev/null
+++ b/packages/products/tdesign-vue/src/scrollbar/scrollbar.md
@@ -0,0 +1,36 @@
+:: BASE_DOC ::
+
+## API
+
+### Scrollbar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+ariaLabel | String | - | 视图层的 aria-label 文本 | N
+autoExpand | Boolean | true | 滚动条 hover 时是否向外扩展(增加交互热区) | N
+container | Object | - | 设置滚动容器的最大高度/宽度。TS 类型:`ScrollbarContainerProps` | N
+disabled | Boolean | false | 禁止滚动 | N
+id | String | - | 视图层的 ID | N
+noResize | Boolean | false | 容器尺寸是否响应变化(若容器尺寸恒定,开启可优化性能) | N
+role | String | scrollbar | 视图层的 WAI-ARIA 角色 | N
+step | Object | - | 滚动步长。TS 类型:`{x?:number;y?:number}` | N
+tabindex | String / Number | - | 包裹容器的 tabindex | N
+thumbMinSize | Number | 20 | 滚动条滑块的最小尺寸(px) | N
+viewClass | String | - | 视图(内容区)的自定义类名 | N
+visibility | String | hover | 滚动条的显示形式。可选项:always/hover/hide | N
+wrapClass | String | - | 包裹容器的自定义类名 | N
+onScroll | Function | | TS 类型:`(context:{e:Event}) => void`
滚动时触发 | N
+
+### Scrollbar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+scroll | `(context:{e:Event})` | 滚动时触发
+
+### ScrollbarInstanceFunctions 组件实例方法
+
+名称 | 参数 | 返回值 | 描述
+-- | -- | -- | --
+getValues | \- | `PositionValues ` | 必需。获取包含完整滚动信息的视图对象。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/scrollbar/type.ts)。
` interface PositionValues { left:number,top: number,scrollLeft:number,scrollTop:number,scrollWidth:number,scrollHeight:number, clientWidth:number,clientHeight:number }`
+scrollTo | `(options: { top?: number; left?: number; behavior?: ScrollBehavior })` | \- | 必需。滚动到一组特定坐标。TS 类型:`ScrollToFn` `type ScrollToFn = { (x: number, y: number): void; (options: { top?: number; left?: number; behavior?: ScrollBehavior }): void; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/scrollbar/type.ts)
+scrollToEdge | `(position:PositionEdge) ` | \- | 必需。滚动到某一边。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/scrollbar/type.ts)。
`type PositionEdge = "left"\|"right"\|"top"\|"bottom"`
diff --git a/packages/products/tdesign-vue/src/scrollbar/type.ts b/packages/products/tdesign-vue/src/scrollbar/type.ts
new file mode 100644
index 000000000..bab94ddd7
--- /dev/null
+++ b/packages/products/tdesign-vue/src/scrollbar/type.ts
@@ -0,0 +1,108 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdScrollbarProps {
+ /**
+ * 视图层的 aria-label 文本
+ * @default ''
+ */
+ ariaLabel?: string;
+ /**
+ * 滚动条 hover 时是否向外扩展(增加交互热区)
+ * @default true
+ */
+ autoExpand?: boolean;
+ /**
+ * 设置滚动容器的最大高度/宽度
+ */
+ container?: ScrollbarContainerProps;
+ /**
+ * 禁止滚动
+ * @default false
+ */
+ disabled?: boolean;
+ /**
+ * 视图层的 ID
+ * @default ''
+ */
+ id?: string;
+ /**
+ * 容器尺寸是否响应变化(若容器尺寸恒定,开启可优化性能)
+ * @default false
+ */
+ noResize?: boolean;
+ /**
+ * 视图层的 WAI-ARIA 角色
+ * @default scrollbar
+ */
+ role?: string;
+ /**
+ * 滚动步长
+ */
+ step?: { x?: number; y?: number };
+ /**
+ * 包裹容器的 tabindex
+ */
+ tabindex?: string | number;
+ /**
+ * 滚动条滑块的最小尺寸(px)
+ * @default 20
+ */
+ thumbMinSize?: number;
+ /**
+ * 视图(内容区)的自定义类名
+ * @default ''
+ */
+ viewClass?: string;
+ /**
+ * 滚动条的显示形式
+ * @default hover
+ */
+ visibility?: 'always' | 'hover' | 'hide';
+ /**
+ * 包裹容器的自定义类名
+ * @default ''
+ */
+ wrapClass?: string;
+ /**
+ * 滚动时触发
+ */
+ onScroll?: (context: { e: Event }) => void;
+}
+
+/** 组件实例方法 */
+export interface ScrollbarInstanceFunctions {
+ /**
+ * 获取包含完整滚动信息的视图对象
+ */
+ getValues: () => PositionValues;
+ /**
+ * 滚动到一组特定坐标
+ */
+ scrollTo: (options: { top?: number; left?: number; behavior?: ScrollBehavior }) => void;
+ /**
+ * 滚动到某一边
+ */
+ scrollToEdge: (position: PositionEdge) => void;
+}
+
+export interface PositionValues {
+ left: number;
+ top: number;
+ scrollLeft: number;
+ scrollTop: number;
+ scrollWidth: number;
+ scrollHeight: number;
+ clientWidth: number;
+ clientHeight: number;
+}
+
+export type ScrollToFn = {
+ (x: number, y: number): void;
+ (options: { top?: number; left?: number; behavior?: ScrollBehavior }): void;
+};
+
+export type PositionEdge = 'left' | 'right' | 'top' | 'bottom';
diff --git a/packages/scripts/api.json b/packages/scripts/api.json
index bb0551ec5..9e58cfebd 100644
--- a/packages/scripts/api.json
+++ b/packages/scripts/api.json
@@ -109894,6 +109894,870 @@
],
"field_type_text": []
},
+ {
+ "id": 1785643138,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "ariaLabel",
+ "field_type": [
+ "1"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "视图层的 aria-label 文本",
+ "field_desc_en": "aria-label text in view layer",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:58:58",
+ "update_time": "2026-08-02 03:58:58",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String"
+ ]
+ },
+ {
+ "id": 1785642956,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "autoExpand",
+ "field_type": [
+ "4"
+ ],
+ "field_default_value": "true",
+ "field_enum": "",
+ "field_desc_zh": "滚动条 hover 时是否向外扩展(增加交互热区)",
+ "field_desc_en": "Should the scrollbar expand outwards when hovering (to increase the interactive hotspot)?",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:55:56",
+ "update_time": "2026-08-02 03:55:56",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "Boolean"
+ ]
+ },
+ {
+ "id": 1785642550,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "container",
+ "field_type": [
+ "8"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "设置滚动容器的最大高度/宽度",
+ "field_desc_en": "Set the maximum height/width of the scrolling container.",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:49:10",
+ "update_time": "2026-08-02 03:49:10",
+ "event_output": null,
+ "custom_field_type": "ScrollbarContainerProps",
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "Object"
+ ]
+ },
+ {
+ "id": 1785642610,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "disabled",
+ "field_type": [
+ "4"
+ ],
+ "field_default_value": "false",
+ "field_enum": "",
+ "field_desc_zh": "禁止滚动",
+ "field_desc_en": "disabled scroll",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:50:10",
+ "update_time": "2026-08-02 03:50:10",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "Boolean"
+ ]
+ },
+ {
+ "id": 1785643082,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "id",
+ "field_type": [
+ "1"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "视图层的 ID",
+ "field_desc_en": "ID of the view layer",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:58:02",
+ "update_time": "2026-08-02 03:58:02",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String"
+ ]
+ },
+ {
+ "id": 1785642246,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "noResize",
+ "field_type": [
+ "4"
+ ],
+ "field_default_value": "false",
+ "field_enum": "",
+ "field_desc_zh": "容器尺寸是否响应变化(若容器尺寸恒定,开启可优化性能)",
+ "field_desc_en": "Does the container size respond to changes? (If the container size is constant, enabling this feature can optimize performance.)",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:44:06",
+ "update_time": "2026-08-02 03:44:06",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "Boolean"
+ ]
+ },
+ {
+ "id": 1785643111,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "role",
+ "field_type": [
+ "1"
+ ],
+ "field_default_value": "scrollbar",
+ "field_enum": "",
+ "field_desc_zh": "视图层的 WAI-ARIA 角色",
+ "field_desc_en": "WAI-ARIA role in the view layer",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:58:31",
+ "update_time": "2026-08-02 03:58:31",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String"
+ ]
+ },
+ {
+ "id": 1785642680,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "step",
+ "field_type": [
+ "8"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "滚动步长",
+ "field_desc_en": "Rolling step",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:51:20",
+ "update_time": "2026-08-02 03:51:20",
+ "event_output": null,
+ "custom_field_type": "{x?:number;y?:number}",
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "Object"
+ ]
+ },
+ {
+ "id": 1785643171,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "tabindex",
+ "field_type": [
+ "1",
+ "2"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "包裹容器的 tabindex",
+ "field_desc_en": "tabindex of the container",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:59:31",
+ "update_time": "2026-08-02 03:59:31",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String",
+ "Number"
+ ]
+ },
+ {
+ "id": 1785642391,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "thumbMinSize",
+ "field_type": [
+ "2"
+ ],
+ "field_default_value": "20",
+ "field_enum": "",
+ "field_desc_zh": "滚动条滑块的最小尺寸(px)",
+ "field_desc_en": "Minimum size (px) of the scroll bar slider.",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:46:31",
+ "update_time": "2026-08-02 03:46:31",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "Number"
+ ]
+ },
+ {
+ "id": 1785642840,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "viewClass",
+ "field_type": [
+ "1"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "视图(内容区)的自定义类名",
+ "field_desc_en": "Custom class name for the view (content area)",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:54:00",
+ "update_time": "2026-08-02 03:54:00",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String"
+ ]
+ },
+ {
+ "id": 1785642898,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "visibility",
+ "field_type": [
+ "1"
+ ],
+ "field_default_value": "hover",
+ "field_enum": "always/hover/hide",
+ "field_desc_zh": "滚动条的显示形式",
+ "field_desc_en": "Scroll bar display format",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:54:58",
+ "update_time": "2026-08-02 03:54:58",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String"
+ ]
+ },
+ {
+ "id": 1785642797,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 1,
+ "field_name": "wrapClass",
+ "field_type": [
+ "1"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "包裹容器的自定义类名",
+ "field_desc_en": "Custom class name of the wrapper container",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:53:17",
+ "update_time": "2026-08-02 03:53:17",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String"
+ ]
+ },
+ {
+ "id": 1785643580,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 2,
+ "field_name": "scroll",
+ "field_type": [
+ "1",
+ "2"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "滚动时触发",
+ "field_desc_en": "Triggered while scrolling",
+ "field_required": 0,
+ "event_input": "(context:{e:Event})",
+ "create_time": "2026-08-02 04:06:20",
+ "update_time": "2026-08-02 04:06:20",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Events",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String",
+ "Number"
+ ]
+ },
+ {
+ "id": 1785647487,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 4,
+ "field_name": "getValues",
+ "field_type": [
+ "1",
+ "2"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "获取包含完整滚动信息的视图对象",
+ "field_desc_en": "Get the view object containing complete scrolling information",
+ "field_required": 1,
+ "event_input": "",
+ "create_time": "2026-08-02 05:11:28",
+ "update_time": "2026-08-02 05:11:28",
+ "event_output": "PositionValues 【 interface PositionValues { left:number,top: number,scrollLeft:number,scrollTop:number,scrollWidth:number,scrollHeight:number, clientWidth:number,clientHeight:number }】",
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Functions",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String",
+ "Number"
+ ]
+ },
+ {
+ "id": 1785646744,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 4,
+ "field_name": "scrollTo",
+ "field_type": [
+ "32"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "滚动到一组特定坐标",
+ "field_desc_en": "Scroll to a specific set of coordinates",
+ "field_required": 1,
+ "event_input": "(options: { top?: number; left?: number; behavior?: ScrollBehavior })",
+ "create_time": "2026-08-02 04:59:04",
+ "update_time": "2026-08-02 04:59:04",
+ "event_output": "",
+ "custom_field_type": "ScrollToFn【type ScrollToFn = { (x: number, y: number): void; (options: { top?: number; left?: number; behavior?: ScrollBehavior }): void; }】",
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Functions",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "Function"
+ ]
+ },
+ {
+ "id": 1785646985,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 4,
+ "field_name": "scrollToEdge",
+ "field_type": [
+ "32"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "滚动到某一边",
+ "field_desc_en": "Scroll to one side",
+ "field_required": 1,
+ "event_input": "(position:PositionEdge) 【type PositionEdge = \"left\"|\"right\"|\"top\"|\"bottom\"】",
+ "create_time": "2026-08-02 05:03:05",
+ "update_time": "2026-08-02 05:03:05",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Functions",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "Function"
+ ]
+ },
+ {
+ "id": 1785642818,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 256,
+ "field_name": "viewStyle",
+ "field_type": [
+ "1"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "视图(内容区)的自定义内联样式",
+ "field_desc_en": "Custom inline styles for view (content area)",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:53:38",
+ "update_time": "2026-08-02 03:53:38",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "CSS Variables",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String"
+ ]
+ },
+ {
+ "id": 1785642756,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "Scrollbar",
+ "field_category": 256,
+ "field_name": "wrapStyle",
+ "field_type": [
+ "1"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "包裹容器的自定义内联样式",
+ "field_desc_en": "Custom inline styles for wrapping containers",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 03:52:36",
+ "update_time": "2026-08-02 03:52:36",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "CSS Variables",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String"
+ ]
+ },
+ {
+ "id": 1785650133,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "ScrollbarValues",
+ "field_category": 1,
+ "field_name": "PositionEdge",
+ "field_type": [
+ "1"
+ ],
+ "field_default_value": "",
+ "field_enum": "left/right/top/bottom",
+ "field_desc_zh": "滚动到某一边",
+ "field_desc_en": "Scroll to one side",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 05:55:33",
+ "update_time": "2026-08-02 05:55:33",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String"
+ ]
+ },
+ {
+ "id": 1785650340,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "ScrollbarValues",
+ "field_category": 1,
+ "field_name": "PositionEdge",
+ "field_type": [
+ "1"
+ ],
+ "field_default_value": "",
+ "field_enum": "left/right/top/bottom",
+ "field_desc_zh": "滚动到某一边",
+ "field_desc_en": "Scroll to one side",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 05:59:00",
+ "update_time": "2026-08-02 05:59:00",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "String"
+ ]
+ },
+ {
+ "id": 1785650036,
+ "platform_framework": [
+ "1",
+ "2"
+ ],
+ "component": "ScrollbarValues",
+ "field_category": 1,
+ "field_name": "PositionValues",
+ "field_type": [
+ "8"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "获取包含完整滚动信息的视图对象",
+ "field_desc_en": "Get the view object containing complete scrolling information",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2026-08-02 05:53:56",
+ "update_time": "2026-08-02 05:53:56",
+ "event_output": null,
+ "custom_field_type": "{left: (scrollLeft / (scrollWidth - clientWidth)) || 0,top: (scrollTop / (scrollHeight - clientHeight)) || 0,scrollLeft,scrollTop,scrollWidth,scrollHeight,clientWidth, clientHeight}",
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)"
+ ],
+ "field_type_text": [
+ "Object"
+ ]
+ },
{
"id": 1542,
"platform_framework": [
diff --git a/packages/scripts/map.json b/packages/scripts/map.json
index 70eabcf1d..368821b5c 100644
--- a/packages/scripts/map.json
+++ b/packages/scripts/map.json
@@ -877,6 +877,10 @@
"value": "Row",
"label": "栅格-横向"
},
+ {
+ "value": "Scrollbar",
+ "label": "滚动条"
+ },
{
"value": "Search",
"label": "搜索"
diff --git a/packages/server/controllers/ComponentApi/const.ts b/packages/server/controllers/ComponentApi/const.ts
index df0d48d17..ee10f4c9a 100644
--- a/packages/server/controllers/ComponentApi/const.ts
+++ b/packages/server/controllers/ComponentApi/const.ts
@@ -368,6 +368,7 @@ export const COMPONENTS_PC: Array = [
{ value: 'AutoCompleteConfig', label: '自动填充全局配置', type: 'TS' },
{ value: 'QRCode', label: '二维码' },
{ value: 'QRCodeConfig', label: '二维码全局配置', type: 'TS' },
+ { value: 'Scrollbar', label: '滚动条' },
].sort((a, b) => a.value.localeCompare(b.value));
export const COMPONENTS_MOBILE: Array = [