diff --git a/.vscode/settings.json b/.vscode/settings.json
index 25fa8505b..542d24d43 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -12,10 +12,6 @@
     "[json]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
-    // md 文件按 prettier 规范格式化
-    "[md]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
     "prettier.printWidth": 180,
 
     // Enable eslint for all supported languages
@@ -24,6 +20,6 @@
         "javascriptreact",
         "typescript",
         "typescriptreact",
-        "vue",
+        "vue"
     ]
 }
diff --git a/components/scrollbar/style/index.less b/components/scrollbar/style/index.less
index 00d40414a..3dcfe0930 100644
--- a/components/scrollbar/style/index.less
+++ b/components/scrollbar/style/index.less
@@ -16,6 +16,7 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
+    
     .@{scrollbar-prefix-cls}-shadow-top {
         .shadow(@scrollbar-shadow-size, 'top')
     }
@@ -32,6 +33,11 @@
         width: 100%;
         height: 100%;
         overflow: auto;
+        // 启用硬件加速和平滑滚动
+        transform: translate3d(0, 0, 0);
+        // 包含优化，减少重排重绘
+        contain: layout style paint;
+        will-change: scroll-position;
     }
     &-content {
         box-sizing: border-box;
diff --git a/components/virtual-list/listItem.ts b/components/virtual-list/listItem.ts
index f8a0c10d4..74b3a346e 100644
--- a/components/virtual-list/listItem.ts
+++ b/components/virtual-list/listItem.ts
@@ -2,7 +2,7 @@
  * item component, we need to know their size change at any time
  */
 
-import { cloneVNode, computed, defineComponent, ref } from 'vue';
+import { cloneVNode, computed, defineComponent, onBeforeUnmount, ref } from 'vue';
 import useResize from '../_util/use/useResize';
 import { getFirstValidNode } from '../_util/vnode';
 import getElementFromVueInstance from '../_util/getElementFromVueInstance';
@@ -14,20 +14,51 @@ export const FVirtualListItem = defineComponent({
     props: itemProps,
     setup(props, { attrs }) {
         const itemRef = ref();
+        let lastReportedSize = 0;
+        let sizeCheckTimer: number | null = null;
 
-        // tell parent current size identify by unqiue key
+        // 优化的尺寸变化检测和上报
         const dispatchSizeChange = () => {
+            if (!itemRef.value) {
+                return;
+            }
+
             const shapeKey = props.horizontal ? 'offsetWidth' : 'offsetHeight';
-            const s = itemRef.value ? itemRef.value[shapeKey] : 0;
-            (attrs as any).onItemResized(props.uniqueKey, s);
+            const currentSize = itemRef.value[shapeKey] || 0;
+
+            // 只有当尺寸显著变化时才上报，避免频繁的微小变化
+            // 阈值可以根据实际情况调整，例如设置为2px
+            const sizeThreshold = 2;
+            if (Math.abs(currentSize - lastReportedSize) >= sizeThreshold) {
+                lastReportedSize = currentSize;
+                (attrs as any).onItemResized(props.uniqueKey, currentSize);
+            }
         };
 
+        // 防抖的尺寸检查，并确保在组件卸载时清除定时器
+        const debouncedSizeCheck = () => {
+            if (sizeCheckTimer) {
+                clearTimeout(sizeCheckTimer);
+            }
+            // 稍微增加延迟，减少高频触发，例如 30ms
+            sizeCheckTimer = setTimeout(dispatchSizeChange, 16) as any;
+        };
+
+        // 使用原有的useResize，但添加防抖
         useResize(
             itemRef,
-            dispatchSizeChange,
+            debouncedSizeCheck,
             computed(() => !props.observeResize),
         );
 
+        // 清理定时器
+        onBeforeUnmount(() => {
+            if (sizeCheckTimer) {
+                clearTimeout(sizeCheckTimer);
+                sizeCheckTimer = null;
+            }
+        });
+
         return {
             itemRef,
         };
diff --git a/components/virtual-scroller/virtual-scroller.tsx b/components/virtual-scroller/virtual-scroller.tsx
index a27a8d20a..8502f5982 100644
--- a/components/virtual-scroller/virtual-scroller.tsx
+++ b/components/virtual-scroller/virtual-scroller.tsx
@@ -55,6 +55,14 @@ export const virtualScrollerProps = {
     renderItemList: {
         type: Function as PropType<(itemVNodes: VNodeChild) => VNodeChild>,
     },
+    topThreshold: {
+        type: Number,
+        default: 0,
+    },
+    bottomThreshold: {
+        type: Number,
+        default: 0,
+    },
 } as const satisfies ComponentObjectPropsOptions;
 
 export type VirtualScrollerProps = ExtractPublicPropTypes<typeof virtualScrollerProps>;
@@ -123,10 +131,10 @@ export default defineComponent({
                 virtualRef.value?.scrollBy(offset);
             },
             getItemOffset: (index: number) => {
-                virtualRef.value?.getItemOffset(index);
+                return virtualRef.value?.getItemOffset(index);
             },
             getItemSize: (index: number) => {
-                virtualRef.value?.getItemSize(index);
+                return virtualRef.value?.getItemSize(index);
             },
             findStartIndex: () => {
                 virtualRef.value?.findStartIndex();
@@ -134,17 +142,25 @@ export default defineComponent({
             findEndIndex: () => {
                 virtualRef.value?.findEndIndex();
             },
+            getOffset,
+            getScrollSize,
+            getClientSize,
         });
 
+        let lastScrollTop = 0;
         const onScroll = (e: Event) => {
             emit('scroll', e);
+            const currentScrollTop = (e.target as HTMLElement).scrollTop;
+            const isScrollUp = currentScrollTop < lastScrollTop;
+            lastScrollTop = currentScrollTop;
+
             const offset = getOffset();
             const scrollSize = getScrollSize();
             const clientSize = getClientSize();
-            if (offset === 0) {
+            if (isScrollUp && offset <= props.topThreshold) {
                 emit('toTop');
             }
-            if (offset + clientSize >= scrollSize) {
+            if (!isScrollUp && offset + clientSize >= scrollSize - props.bottomThreshold) {
                 emit('toBottom');
             }
         };
diff --git a/docs/.vitepress/components/virtualList/common.vue b/docs/.vitepress/components/virtualList/common.vue
index 1dde86f08..e609c45db 100644
--- a/docs/.vitepress/components/virtualList/common.vue
+++ b/docs/.vitepress/components/virtualList/common.vue
@@ -1,11 +1,11 @@
 <template>
-    <FVirtualScroller
+    <FVirtualList
         ref="virtualList"
         class="virtual-scroll-list-vertical"
         dataKey="id"
         :dataSources="dataItems"
-        :itemSize="100"
-        :scrollbarProps="{ height: 400 }"
+        :estimateSize="80"
+        :height="height"
     >
         <template #default="{ source, index }">
             <div :data-index="index" class="item-inner">
@@ -16,7 +16,7 @@
                 <div class="desc">{{ source.desc }}</div>
             </div>
         </template>
-    </FVirtualScroller>
+    </FVirtualList>
     <FButton style="margin-top: 10px;" @click="addMessage">添加消息{{ dataItems.length }}</FButton>
 </template>
 
@@ -76,8 +76,6 @@ export default {
 </script>
 
 <style scoped>
-.virtual-scroll-list-vertical .item-inner {
-}
 .virtual-scroll-list-vertical .item-inner .head {
     font-weight: 500;
 }
diff --git a/docs/.vitepress/components/virtualList/index.md b/docs/.vitepress/components/virtualList/index.md
index b72b772cd..541c86cf3 100644
--- a/docs/.vitepress/components/virtualList/index.md
+++ b/docs/.vitepress/components/virtualList/index.md
@@ -12,16 +12,10 @@ app.use(FVirtualList);
 
 ## 代码演示
 
-### virtual-scroller
-
-:::demo
-common.vue
-:::
-
 ### 不规则纵向滚动列表
 
 :::demo
-vertical.vue
+common.vue
 :::
 
 ### 不规则横向滚动列表
@@ -36,6 +30,12 @@ horizontal.vue
 maxHeight.vue
 :::
 
+### 无限滚动
+
+:::demo
+infinite.vue
+:::
+
 ### 滚动操作
 
 :::demo
diff --git a/docs/.vitepress/components/virtualList/infinite.vue b/docs/.vitepress/components/virtualList/infinite.vue
new file mode 100644
index 000000000..91210d3c9
--- /dev/null
+++ b/docs/.vitepress/components/virtualList/infinite.vue
@@ -0,0 +1,97 @@
+<template>
+    <FVirtualList
+        ref="virtualList"
+        class="virtual-scroll-list-vertical"
+        dataKey="id"
+        :dataSources="dataItems"
+        :estimateSize="80"
+        :height="height"
+        @toTop="handleToTop"
+        @toBottom="handleToBottom"
+    >
+        <template #default="{ source, index }">
+            <div :data-index="index" class="item-inner">
+                <div class="head">
+                    <span># {{ source.index }}</span>
+                    <span>{{ source.name }}</span>
+                </div>
+                <div class="desc">{{ source.desc }}</div>
+            </div>
+        </template>
+    </FVirtualList>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    name: 'Vertical',
+    setup() {
+        const virtualList = ref(null);
+        const height = ref(400);
+        const sentence3 = [
+            'BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。',
+            'IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)',
+            'margin 重合，margin 塌陷',
+            'html5IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)',
+        ];
+        const genUniqueId = (prefix) => {
+            return `${prefix}$${Math.random().toString(16).substr(9)}`;
+        };
+        const getSentences = () => {
+            const index = Math.floor(Math.random() * (sentence3.length - 1));
+            return sentence3[index];
+        };
+        const TOTAL_COUNT = 1000;
+        const dataItems = ref([]);
+
+        const createData = (length, startIndex, isAdd = true) => {
+            const result = [];
+            let count = length;
+            while (count--) {
+                const index = isAdd ? startIndex + length - count - 1 : startIndex - count - 1;
+                result.push({
+                    index,
+                    name: `${Math.random()}`,
+                    id: genUniqueId(index),
+                    desc: getSentences(),
+                });
+            }
+            return result;
+        };
+
+        dataItems.value = createData(TOTAL_COUNT, 1);
+
+        const handleToBottom = () => {
+            dataItems.value = [...dataItems.value, ...createData(10, dataItems.value[dataItems.value.length - 1].index + 1)];
+        };
+        const handleToTop = () => {
+            dataItems.value = [...createData(10, dataItems.value[0].index, false), ...dataItems.value];
+            setTimeout(() => {
+                virtualList.value.scrollToIndex(10);
+            }, 0);
+        };
+        return {
+            virtualList,
+            dataItems,
+            height,
+            handleToBottom,
+            handleToTop,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.virtual-scroll-list-vertical .item-inner .head {
+    font-weight: 500;
+}
+.virtual-scroll-list-vertical .item-inner .head span:first-child {
+    margin-right: 1em;
+}
+.virtual-scroll-list-vertical .item-inner .desc {
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+    text-align: justify;
+}
+</style>
diff --git a/docs/.vitepress/components/virtualList/maxHeight.vue b/docs/.vitepress/components/virtualList/maxHeight.vue
index 39b123e1c..f57e125bf 100644
--- a/docs/.vitepress/components/virtualList/maxHeight.vue
+++ b/docs/.vitepress/components/virtualList/maxHeight.vue
@@ -32,7 +32,7 @@
         <FVirtualList
             class="virtual-scroll-list-max-height"
             wrapClass="virtual-scroll-list-wrap"
-            :dataKey="(data) => data"
+            dataKey="id"
             :dataSources="vals"
             :estimateSize="80"
             :height="height"
@@ -40,7 +40,7 @@
         >
             <template #default="{ source }">
                 <div class="virtual-scroll-item">
-                    {{ source }}
+                    {{ source.desc }}
                 </div>
             </template>
         </FVirtualList>
@@ -57,9 +57,36 @@ export default {
         const maxHeight = ref(200);
 
         const vals = ref([]);
-        for (let i = 0; i < 6; ++i) {
-            vals.value.push(i);
-        }
+        const sentence3 = [
+            'BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。',
+            'IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)',
+            'margin 重合，margin 塌陷',
+            'html5IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)',
+        ];
+        const genUniqueId = (prefix) => {
+            return `${prefix}$${Math.random().toString(16).substr(9)}`;
+        };
+        const getSentences = () => {
+            const index = Math.floor(Math.random() * (sentence3.length - 1));
+            return sentence3[index];
+        };
+
+        const createData = (length, startIndex, isAdd = true) => {
+            const result = [];
+            let count = length;
+            while (count--) {
+                const index = isAdd ? startIndex + length - count - 1 : startIndex - count - 1;
+                result.push({
+                    index,
+                    name: `${Math.random()}`,
+                    id: genUniqueId(index),
+                    desc: getSentences(),
+                });
+            }
+            return result;
+        };
+
+        vals.value = createData(1000, 1);
 
         watch(
             heightType,
@@ -97,9 +124,7 @@ export default {
     width: 1000px;
 }
 .virtual-scroll-list-max-height .virtual-scroll-list-wrap .virtual-scroll-item {
-    height: 36px;
-    background: rgba(83, 132, 255, 0.06);
-    border-bottom: 2px solid #fff;
+    margin: 0.5em;
 }
 .virtual-scroll-list-max-height
     .virtual-scroll-list-wrap
diff --git a/docs/.vitepress/components/virtualList/vertical.vue b/docs/.vitepress/components/virtualScroller/common.vue
similarity index 98%
rename from docs/.vitepress/components/virtualList/vertical.vue
rename to docs/.vitepress/components/virtualScroller/common.vue
index e609c45db..5cc290eed 100644
--- a/docs/.vitepress/components/virtualList/vertical.vue
+++ b/docs/.vitepress/components/virtualScroller/common.vue
@@ -1,10 +1,9 @@
 <template>
-    <FVirtualList
+    <FVirtualScroller
         ref="virtualList"
         class="virtual-scroll-list-vertical"
-        dataKey="id"
         :dataSources="dataItems"
-        :estimateSize="80"
+        :itemSize="80"
         :height="height"
     >
         <template #default="{ source, index }">
@@ -16,7 +15,7 @@
                 <div class="desc">{{ source.desc }}</div>
             </div>
         </template>
-    </FVirtualList>
+    </FVirtualScroller>
     <FButton style="margin-top: 10px;" @click="addMessage">添加消息{{ dataItems.length }}</FButton>
 </template>
 
diff --git a/docs/.vitepress/components/virtualScroller/horizontal.vue b/docs/.vitepress/components/virtualScroller/horizontal.vue
new file mode 100644
index 000000000..59b26c9f9
--- /dev/null
+++ b/docs/.vitepress/components/virtualScroller/horizontal.vue
@@ -0,0 +1,69 @@
+<template>
+    <FVirtualScroller
+        class="virtual-scroll-list-horizontal"
+        :dataSources="items"
+        :itemSize="110"
+        direction="horizontal"
+    >
+        <template #default="{ source }">
+            <div
+                class="item-inner-horizontal"
+                :style="{ width: `${source.size}px` }"
+            >
+                <div class="index"># {{ source.index }}</div>
+                <div class="size">{{ source.size }}</div>
+            </div>
+        </template>
+    </FVirtualScroller>
+</template>
+
+<script>
+const TOTAL_COUNT = 100;
+const sizes = [60, 80, 100, 150, 180];
+
+const genUniqueId = (prefix) => {
+    return `${prefix}$${Math.random().toString(16).substr(9)}`;
+};
+
+const dataItems = [];
+let count = TOTAL_COUNT;
+while (count--) {
+    const index = TOTAL_COUNT - count;
+    dataItems.push({
+        index,
+        id: genUniqueId(index),
+        size: sizes[Math.floor(Math.random() * 5)],
+    });
+}
+
+export default {
+    name: 'Horizontal',
+    setup() {
+        return {
+            items: dataItems,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.virtual-scroll-list-horizontal {
+    width: 100%;
+    height: 120px;
+}
+.virtual-scroll-list-horizontal .item-inner-horizontal {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 2em 0;
+}
+.virtual-scroll-list-horizontal .item-inner-horizontal .index {
+    width: 100%;
+    text-align: center;
+}
+.virtual-scroll-list-horizontal .item-inner-horizontal .size {
+    text-align: right;
+    color: darkgray;
+    font-size: 16px;
+}
+</style>
diff --git a/docs/.vitepress/components/virtualScroller/index.md b/docs/.vitepress/components/virtualScroller/index.md
new file mode 100644
index 000000000..cb73018fb
--- /dev/null
+++ b/docs/.vitepress/components/virtualScroller/index.md
@@ -0,0 +1,79 @@
+# VirtualScroller 虚拟滚动
+
+比虚拟列表有更好的渲染性能。
+
+## 组件注册
+
+```js
+import { FVirtualScroller } from 'fes-design';
+
+app.use(FVirtualScroller);
+```
+
+## 代码演示
+
+### 不规则纵向滚动
+
+:::demo
+common.vue
+:::
+
+### 不规则横向滚动
+
+:::demo
+horizontal.vue
+:::
+
+### 无限滚动
+
+:::demo
+infinite.vue
+:::
+
+### 滚动操作
+
+:::demo
+scroll.vue
+:::
+
+## VirtualScroller Props
+
+| 属性            | 说明                                                                                                                                    | 类型                                   | 默认值     |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ---------- |
+| dataSources     | 为列表生成的源数组，每个数组数据必须是一个对象                                  | Array\<Object\>                        | `-`        |
+| keeps           | 您期望虚拟列表在真实 `dom` 中保持渲染的项目数量。                                                                                       | number                                 | 30         |
+| itemSize    | 每项的估计大小，如果它更接近平均大小，滚动条长度看起来更准确。建议指定自己计算的平均值                                                  | number                                 | 50         |
+| itemTag    |  子项的包裹元素                                           | number                                 | `div`         |
+| itemProps    |  子项包裹元素的属性                                           | function                                 | `({ item, index }: { item: ItemData; index: number }) => any`         |
+| direction       | 滚动的方向, 可选值为 `vertical` 和 `horizontal`                                                                                         | string                                 | `vertical` |
+| wrapTag         | 列表包裹元素名称                                                                                                                        | string                                 | `div`      |
+| wrapClass       | 列表包裹元素类名                                                                                                                        | string                                 | -          |
+| wrapStyle       | 列表包裹元素内联样式                                                                                                                    | object                                 | `{}`       |
+| topThreshold    | 触发`toTop` 事件的阈值                                                                                                                  | number                                 | 0          |
+| bottomThreshold | 触发`toBottom` 事件的阈值                                                                                                               | number                                 | 0          |
+| scrollbarProps       | 滚动条样式，参考滚动条组件                                                                                                                    | object                                 | -       |
+
+## VirtualScroller Events
+
+| 事件名称 | 说明                               | 回调参数                      |
+| -------- | ---------------------------------- | ----------------------------- |
+| scroll   | 滚动时触发                         | (event: Event, range) => void |
+| toTop    | 当滚动到顶部或者左边时触发         | () => void                    |
+| toBottom | 当滚动到底部或者右边时触发，无参数 | () => void                    |
+
+## VirtualScroller Methods
+
+| 名称           | 说明                                                                                   | 参数                     |
+| -------------- | -------------------------------------------------------------------------------------- | ------------------------ |
+| scrollRef          | 滚动条                                                               |  -               |
+| scrollToIndex | 手动将滚动位置设置为指定索引                                                               | () => void               |
+| scrollToBottom  | 手动将滚动位置设置到最底部                                                           | (index: number) => void  |
+| scrollBy | 手动将滚动位置设置为相对指定偏移量                                                     | (offset: number) => void |
+| scrollTo | 手动将滚动位置设置为指定偏移量                                                     | (offset: number) => void |
+| getItemOffset        | 获取选项位置  | (index: number) => number   |
+| getItemSize       | 获取选项大小                                                            | (index: number) => number             |
+| getOffset      | 获取当前滚动偏移量                                                                     | () => number             |
+| getClientSize  | 获取包装器元素客户端视口大小（宽度或高度）                                             | () => number             |
+| getScrollSize  | 获取所有滚动大小（滚动高度或滚动宽度）                                                 | () => number             |
+| findStartIndex  | 获取显示的初始元素索引                                            | () => number             |
+| findEndIndex  | 获取显示的结束元素索引                                              | () => number             |
diff --git a/docs/.vitepress/components/virtualScroller/infinite.vue b/docs/.vitepress/components/virtualScroller/infinite.vue
new file mode 100644
index 000000000..e3caae5d2
--- /dev/null
+++ b/docs/.vitepress/components/virtualScroller/infinite.vue
@@ -0,0 +1,96 @@
+<template>
+    <FVirtualScroller
+        ref="virtualList"
+        class="virtual-scroll-list-vertical"
+        :dataSources="dataItems"
+        :itemSize="80"
+        :scrollbarProps="{ height }"
+        @toTop="handleToTop"
+        @toBottom="handleToBottom"
+    >
+        <template #default="{ source, index }">
+            <div :data-index="index" class="item-inner">
+                <div class="head">
+                    <span># {{ source.index }}</span>
+                    <span>{{ source.name }}</span>
+                </div>
+                <div class="desc">{{ source.desc }}</div>
+            </div>
+        </template>
+    </FVirtualScroller>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    name: 'Vertical',
+    setup() {
+        const virtualList = ref(null);
+        const height = ref(400);
+        const sentence3 = [
+            'BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。',
+            'IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)',
+            'margin 重合，margin 塌陷',
+            'html5IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)',
+        ];
+        const genUniqueId = (prefix) => {
+            return `${prefix}$${Math.random().toString(16).substr(9)}`;
+        };
+        const getSentences = () => {
+            const index = Math.floor(Math.random() * (sentence3.length - 1));
+            return sentence3[index];
+        };
+        const TOTAL_COUNT = 1000;
+        const dataItems = ref([]);
+
+        const createData = (length, startIndex, isAdd = true) => {
+            const result = [];
+            let count = length;
+            while (count--) {
+                const index = isAdd ? startIndex + length - count - 1 : startIndex - count - 1;
+                result.push({
+                    index,
+                    name: `${Math.random()}`,
+                    id: genUniqueId(index),
+                    desc: getSentences(),
+                });
+            }
+            return result;
+        };
+
+        dataItems.value = createData(TOTAL_COUNT, 1);
+
+        const handleToBottom = () => {
+            dataItems.value = [...dataItems.value, ...createData(10, dataItems.value[dataItems.value.length - 1].index + 1)];
+        };
+        const handleToTop = () => {
+            dataItems.value = [...createData(10, dataItems.value[0].index, false), ...dataItems.value];
+            setTimeout(() => {
+                virtualList.value.scrollToIndex(10);
+            }, 0);
+        };
+        return {
+            virtualList,
+            dataItems,
+            height,
+            handleToBottom,
+            handleToTop,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.virtual-scroll-list-vertical .item-inner .head {
+    font-weight: 500;
+}
+.virtual-scroll-list-vertical .item-inner .head span:first-child {
+    margin-right: 1em;
+}
+.virtual-scroll-list-vertical .item-inner .desc {
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+    text-align: justify;
+}
+</style>
diff --git a/docs/.vitepress/components/virtualScroller/scroll.vue b/docs/.vitepress/components/virtualScroller/scroll.vue
new file mode 100644
index 000000000..5341642bd
--- /dev/null
+++ b/docs/.vitepress/components/virtualScroller/scroll.vue
@@ -0,0 +1,195 @@
+<template>
+    <FForm :labelWidth="180">
+        <FFormItem label="触发 toTop 事件阈值：">
+            <FInputNumber
+                v-model="topThreshold"
+                :min="0"
+                :max="50"
+                :step="10"
+            />
+            <span style="margin-left: 10px">px</span>
+        </FFormItem>
+        <FFormItem label="触发 toBottom 事件阈值：">
+            <FInputNumber
+                v-model="bottomThreshold"
+                :min="0"
+                :max="50"
+                :step="10"
+            />
+            <span style="margin-left: 10px">px</span>
+        </FFormItem>
+
+        <FSpace>
+            <FButton @click="handleScrollToBottom">滚动到底部位置</FButton>
+            <FButton @click="handleScrollToIndex">滚动到指定索引</FButton>
+            <FButton @click="handleScrollToOffset">
+                滚动到相对指定偏移量
+            </FButton>
+        </FSpace>
+    </FForm>
+
+    <FDivider />
+
+    <FVirtualScroller
+        ref="virtualList"
+        class="virtual-scroll-list-scroll"
+        wrapClass="virtual-scroll-list-wrap"
+        :dataSources="dataItems"
+        :itemSize="100"
+        :scrollbarProps="{ height: 200 }"
+        :topThreshold="topThreshold"
+        :bottomThreshold="bottomThreshold"
+        @scroll="handleScroll"
+        @toTop="handleToTop"
+        @toBottom="handleToBottom"
+        @resized="handleResized"
+    >
+        <template #default="{ source }">
+            <div class="item-inner">
+                <div class="head">
+                    <span># {{ source.index }}</span>
+                    <span>{{ source.name }}</span>
+                </div>
+                <div class="desc">{{ source.desc }}</div>
+            </div>
+        </template>
+    </FVirtualScroller>
+
+    <FDivider />
+
+    <FSpace vertical>
+        <span>第50项高度: {{ getSize }}</span>
+        <span>当前滚动偏移量: {{ getOffset }}</span>
+        <span>容器高度: {{ getClientSize }}</span>
+        <span>滚动高度: {{ getScrollSize }}</span>
+    </FSpace>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { debounce } from 'lodash-es';
+
+function useDataItems() {
+    // The Climb (From Miley Cyrus)
+    const sentence3 = [
+        'BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。',
+        'IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)',
+        'margin 重合，margin 塌陷',
+        'css3',
+        'html5IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)',
+        'es6',
+    ];
+
+    const TOTAL_COUNT = 1000;
+
+    const genUniqueId = (prefix) => {
+        return `${prefix}$${Math.random().toString(16).substr(9)}`;
+    };
+
+    const getSentences = () => {
+        const index = Math.floor(Math.random() * (sentence3.length - 1));
+        return sentence3[index];
+    };
+
+    const dataItems = ref([]);
+    let count = TOTAL_COUNT;
+    while (count--) {
+        const index = TOTAL_COUNT - count;
+        dataItems.value.push({
+            index,
+            name: `${Math.random()}`,
+            id: genUniqueId(index),
+            desc: getSentences(),
+        });
+    }
+
+    return dataItems;
+}
+
+export default {
+    setup() {
+        const virtualList = ref(null);
+        const topThreshold = ref(20);
+        const bottomThreshold = ref(20);
+        const getSize = ref();
+        const getOffset = ref();
+        const getClientSize = ref();
+        const getScrollSize = ref();
+
+        const dataItems = useDataItems();
+
+        function updateSize() {
+            getSize.value = virtualList.value.getItemSize(49);
+            getOffset.value = virtualList.value.getOffset();
+            getClientSize.value = virtualList.value.getClientSize();
+            getScrollSize.value = virtualList.value.getScrollSize();
+        }
+
+        const handleScroll = debounce(() => {
+            updateSize();
+        }, 100);
+        const handleToTop = () => {
+            console.log('[virtualList.scroll] [toTop]');
+        };
+        const handleToBottom = () => {
+            console.log('[virtualList.scroll] [toBottom]');
+        };
+        const handleResized = debounce((id, size) => {
+            console.log(
+                '[virtualList.scroll] [resized] id:',
+                id,
+                ' size:',
+                size,
+            );
+            updateSize();
+        }, 100);
+
+        const handleScrollToBottom = () => {
+            virtualList.value.scrollToBottom();
+        };
+        const handleScrollToIndex = () => {
+            virtualList.value.scrollToIndex(50);
+        };
+        const handleScrollToOffset = () => {
+            virtualList.value.scrollBy(-50);
+        };
+
+        return {
+            virtualList,
+            topThreshold,
+            bottomThreshold,
+            dataItems,
+            handleScroll,
+            handleToTop,
+            handleToBottom,
+            handleResized,
+
+            handleScrollToBottom,
+            handleScrollToIndex,
+            handleScrollToOffset,
+
+            getSize,
+            getOffset,
+            getClientSize,
+            getScrollSize,
+        };
+    },
+};
+</script>
+
+<style>
+.virtual-scroll-list-scroll .virtual-scroll-list-wrap {
+    width: 1000px;
+}
+.virtual-scroll-list-scroll .item-inner .head {
+    font-weight: 500;
+}
+.virtual-scroll-list-scroll .item-inner .head span:first-child {
+    margin-right: 1em;
+}
+.virtual-scroll-list-scroll .item-inner .desc {
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+    text-align: justify;
+}
+</style>
diff --git a/docs/.vitepress/configs/navbar/index.ts b/docs/.vitepress/configs/navbar/index.ts
index 7b5df9e8c..6a7f79425 100644
--- a/docs/.vitepress/configs/navbar/index.ts
+++ b/docs/.vitepress/configs/navbar/index.ts
@@ -1,4 +1,4 @@
-import { type DefaultTheme } from 'vitepress';
+import type { DefaultTheme } from 'vitepress';
 import { getPackageJsonVersion } from '../../../../scripts/utils.js';
 
 const currentVersion = getPackageJsonVersion();
diff --git a/docs/.vitepress/configs/sidebar/index.ts b/docs/.vitepress/configs/sidebar/index.ts
index 53408b40f..e2e371c7b 100644
--- a/docs/.vitepress/configs/sidebar/index.ts
+++ b/docs/.vitepress/configs/sidebar/index.ts
@@ -221,6 +221,9 @@ const sidebarConfig: Record<string, DefaultTheme.Config['sidebar']> = {
                     {
                         text: 'VirtualList 虚拟列表',
                         link: '/zh/components/virtualList',
+                    }, {
+                        text: 'VirtualScroller 虚拟滚动',
+                        link: '/zh/components/virtualScroller',
                     },
                 ],
             },