diff --git a/examples/sites/demos/apis/virtual-scroll.js b/examples/sites/demos/apis/virtual-scroll.js
index f19a46201a..5334b9f525 100644
--- a/examples/sites/demos/apis/virtual-scroll.js
+++ b/examples/sites/demos/apis/virtual-scroll.js
@@ -5,21 +5,100 @@ export default {
       name: 'virtual-scroll',
       type: 'component',
       props: [
+        {
+          name: 'buffer',
+          type: 'Number',
+          defaultValue: '1',
+          desc: {
+            'zh-CN': '显示区域条数的比例值为缓冲区设置',
+            'en-US': 'Scale value of the number of bars in the display area is set for the buffer.'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
         {
           name: 'data',
           type: 'Array',
-          defaultValue: '',
+          defaultValue: '[]',
+          desc: {
+            'zh-CN': '需要展示的数据',
+            'en-US': 'Data to be displayed'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'direction',
+          type: 'String',
+          defaultValue: 'vertical',
+          desc: {
+            'zh-CN': '滚动方向',
+            'en-US': 'scrolling direction'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'estimatedItemSize',
+          type: 'Number',
+          defaultValue: '--',
+          desc: {
+            'zh-CN': '是否启动动态尺寸，你不需关注每个项目的大小，它会自动计算',
+            'en-US':
+              'Whether or not dynamic sizing is activated, you dont need to be concerned about the size of each item, it will be automatically calculated.'
+          },
+          mode: ['pc'],
+          pcDemo: 'dynamic-height'
+        },
+        {
+          name: 'itemSize',
+          type: 'Number',
+          defaultValue: '--',
           desc: {
-            'zh-CN': '设置数据源, 默认通过data属性来传入，在item中显示数据',
+            'zh-CN': '以像素为单位定义每个项目的高度，用于计算滚动条的大小和位置。',
             'en-US':
-              'Set the data source, which is passed through the data attribute by default, to display the data in the item.'
+              'Defines the height of each item in pixels, which is used to calculate the size and position of the scrollbar.'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'itemIndex',
+          type: 'String',
+          defaultValue: 'id',
+          desc: {
+            'zh-CN': '默认滚动的index',
+            'en-US': 'Default scrolling index'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'prerender',
+          type: 'Number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': 'SSR渲染区域的项目条数',
+            'en-US': 'Number of item strips in the SSR rendering area.'
           },
           mode: ['pc'],
           pcDemo: 'basic-usage'
         }
       ],
       events: [],
-      methods: [],
+      methods: [
+        {
+          name: 'scrollToItem',
+          type: '(index:number)=> Promise',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '滚动到对应索引的项目',
+            'en-US': 'Scroll to the item corresponding to the index.'
+          },
+          mode: ['pc'],
+          pcDemo: 'specified-item'
+        }
+      ],
       slots: []
     }
   ],
diff --git a/examples/sites/demos/pc/app/virtual-scroll/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/virtual-scroll/basic-usage-composition-api.vue
index e0cc961a31..76f7be4152 100644
--- a/examples/sites/demos/pc/app/virtual-scroll/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/virtual-scroll/basic-usage-composition-api.vue
@@ -1,10 +1,9 @@
 <template>
   <div>
     <!-- vue3 -->
-    <p>虚拟滚动组件demo</p>
-    <TinyVirtualScroll :data="showData" :itemHeight="30" :viewHeight="180" itemIndex="key">
+    <TinyVirtualScroll :data="showData" :itemSize="50" itemIndex="key" class="tiny-virtual-scroll" direction="vertical">
       <template #default="props">
-        <div class="scroll-item">
+        <div class="tiny-virtual-scroll-item">
           {{ props.item.value }}
         </div>
       </template>
@@ -21,8 +20,26 @@ const showData = ref([])
 // 生成模拟数据
 showData.value = Array.from(Array(1000), (v, k) => {
   return {
-    value: k,
-    key: k
+    value: `第${k + 1}项`,
+    key: k + 1
   }
 })
 </script>
+
+<style>
+.virtual-scroll-demo {
+  height: 100%;
+  overflow: hidden;
+  /* display: flex; */
+}
+
+.tiny-virtual-scroll {
+  height: 300px;
+}
+
+.tiny-virtual-scroll-item {
+  padding: 10px;
+  border-bottom: 2px solid #ddd;
+  align-content: center;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/virtual-scroll/basic-usage.spec.ts b/examples/sites/demos/pc/app/virtual-scroll/basic-usage.spec.ts
index e69de29bb2..3e4c179228 100644
--- a/examples/sites/demos/pc/app/virtual-scroll/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/virtual-scroll/basic-usage.spec.ts
@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('virtual-scroll#basic-usage')
+  const virtualScroll = page.locator('#basic-usage .tiny-virtual-scroll')
+  const virtualScrollItem = virtualScroll.locator('.tiny-virtual-scroll-item')
+  await expect(virtualScroll).toBeVisible()
+  await expect(virtualScrollItem.nth(0)).toBeVisible()
+  await expect(virtualScrollItem.nth(0)).toHaveText('第1项')
+  await page.waitForTimeout(500)
+  const containerBox = await virtualScroll.boundingBox()
+  let visibleCount = 0
+  let visibleItems = []
+  const visibleItemsCount = await virtualScrollItem.count()
+  for (let i = 0; i < visibleItemsCount; i++) {
+    const itemBox = await virtualScrollItem.nth(i).boundingBox()
+    if (itemBox && containerBox) {
+      if (itemBox.y >= containerBox.y && itemBox.y + itemBox.height <= containerBox.y + containerBox.height) {
+        visibleCount++
+        const itemText = await virtualScrollItem.nth(i).textContent()
+        visibleItems.push(itemText.trim())
+      }
+    }
+  }
+  console.log('Visible items:', visibleItems)
+  await expect(visibleCount).toBe(6)
+  for (let i = 0; i < visibleItems.length; i++) {
+    console.log(`Item ${i + 1}:`, visibleItems[i])
+  }
+  await virtualScroll.evaluate((scroll) => scroll.scrollTo(0, 25000))
+  await page.waitForTimeout(500)
+  const targetItem = virtualScroll.locator('.tiny-virtual-scroll-item', { hasText: '第500项' })
+  await expect(targetItem).toBeVisible()
+  await virtualScroll.evaluate((scroll) => scroll.scrollTo(0, 50000))
+  await expect(virtualScrollItem.last()).toHaveText('第1000项')
+  let errors = []
+  expect(errors.length).toBe(0)
+})
diff --git a/examples/sites/demos/pc/app/virtual-scroll/basic-usage.vue b/examples/sites/demos/pc/app/virtual-scroll/basic-usage.vue
index 97893973ea..e3ff73ec66 100644
--- a/examples/sites/demos/pc/app/virtual-scroll/basic-usage.vue
+++ b/examples/sites/demos/pc/app/virtual-scroll/basic-usage.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="virtual-scroll-demo">
     <!-- Vue2的选项式API -->
-    <p>虚拟滚动组件demo</p>
-    <TinyVirtualScroll :data="showData" :itemSize="50" :viewSize="300" itemIndex="key" class="ho" direction="vertical">
+    <TinyVirtualScroll :data="showData" :itemSize="50" itemIndex="key" class="tiny-virtual-scroll">
       <template #default="props">
-        <div class="scroll-item">
+        <div class="tiny-virtual-scroll-item">
           {{ props.item.value }}
         </div>
       </template>
@@ -26,10 +25,10 @@ export default {
   },
   created() {
     // 生成模拟数据
-    this.showData = Array.from(Array(10000), (v, k) => {
+    this.showData = Array.from(Array(1000), (v, k) => {
       return {
-        value: k,
-        key: k
+        value: `第${k + 1}项`,
+        key: k + 1
       }
     })
   }
@@ -43,8 +42,11 @@ export default {
   /* display: flex; */
 }
 
-.scroll-item {
-  width: 600px;
+.tiny-virtual-scroll {
+  height: 300px;
+}
+
+.tiny-virtual-scroll-item {
   padding: 10px;
   border-bottom: 2px solid #ddd;
   align-content: center;
diff --git a/examples/sites/demos/pc/app/virtual-scroll/dynamic-height-composition-api.vue b/examples/sites/demos/pc/app/virtual-scroll/dynamic-height-composition-api.vue
index 98a0c73c89..777ca84cd7 100644
--- a/examples/sites/demos/pc/app/virtual-scroll/dynamic-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/virtual-scroll/dynamic-height-composition-api.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="virtual-scroll-demo">
-    <p>虚拟滚动组件demo</p>
-    <TinyVirtualScroll :data="showData" :estimatedItemSize="50" :viewSize="600" itemIndex="id" class="ho"
-      direction="vertical">
+    <TinyVirtualScroll :data="showData" :estimatedItemSize="50" itemIndex="id" class="tiny-virtual-scroll"
+      direction="vertical" :buffer="0.5">
       <template #default="props">
-        <div class="scroll-item">
+        <div class="tiny-virtual-scroll-item">
           {{ props.item.value }}
         </div>
       </template>
@@ -19,10 +18,10 @@ import { VirtualScroll as TinyVirtualScroll } from '@opentiny/vue'
 // 创建动态数据
 const showData = ref([])
 
-for (let i = 1; i <= 1000; i++) {
+for (let i = 1; i <= 10000; i++) {
   showData.value.push({
     id: i,
-    value: `${i}字符内容`.repeat(Math.ceil(Math.random() * 20)) // 动态文本内容
+    value: `${i}字符内容`.repeat(Math.ceil(Math.random() * 30)) // 动态文本内容
   })
 }
 </script>
@@ -31,11 +30,16 @@ for (let i = 1; i <= 1000; i++) {
 .virtual-scroll-demo {
   height: 100%;
   overflow: hidden;
-  /* display: flex; */
+  /* width: 600px; */
 }
 
-.scroll-item {
+.tiny-virtual-scroll {
+  height: 300px;
+  width: 100%;
+}
+
+.tiny-virtual-scroll-item {
   padding: 10px;
-  border-bottom: 10px solid #ddd;
+  border-bottom: 2px solid #ddd;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/virtual-scroll/dynamic-height.js b/examples/sites/demos/pc/app/virtual-scroll/dynamic-height.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/examples/sites/demos/pc/app/virtual-scroll/dynamic-height.spec.ts b/examples/sites/demos/pc/app/virtual-scroll/dynamic-height.spec.ts
new file mode 100644
index 0000000000..d8da8c331f
--- /dev/null
+++ b/examples/sites/demos/pc/app/virtual-scroll/dynamic-height.spec.ts
@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('virtual-scroll#dynamic-height')
+  const virtualScroll = page.locator('#dynamic-height .tiny-virtual-scroll')
+  const virtualScrollItem = virtualScroll.locator('.tiny-virtual-scroll-item')
+  await expect(virtualScroll).toBeVisible()
+  await expect(virtualScrollItem.nth(0)).toBeVisible()
+  await virtualScroll.evaluate((scroll) => {
+    for (let i = 0; i < 50; i++) {
+      scroll.scrollBy(0, 200)
+    }
+  })
+  await expect(virtualScrollItem.last()).toBeVisible()
+  const midItem = virtualScrollItem.nth(0)
+  await expect(midItem).toBeVisible()
+  const midItemText = await midItem.textContent()
+  expect(midItemText).not.toBeNull()
+  let allVisibleItems = await virtualScrollItem.all()
+  await virtualScroll.evaluate((scroll) => scroll.scrollTo(0, scroll.scrollHeight))
+  const lastItem = virtualScrollItem.last()
+  await expect(lastItem).toBeVisible()
+  const lastItemText = await lastItem.textContent()
+  expect(lastItemText).not.toBeNull()
+  allVisibleItems = await virtualScrollItem.all()
+  for (const item of allVisibleItems) {
+    await expect(item).toBeVisible()
+  }
+})
diff --git a/examples/sites/demos/pc/app/virtual-scroll/dynamic-height.vue b/examples/sites/demos/pc/app/virtual-scroll/dynamic-height.vue
index 7418d1a24a..f90934fca9 100644
--- a/examples/sites/demos/pc/app/virtual-scroll/dynamic-height.vue
+++ b/examples/sites/demos/pc/app/virtual-scroll/dynamic-height.vue
@@ -1,11 +1,10 @@
 <template>
   <div class="virtual-scroll-demo">
     <!-- Vue2的选项式API -->
-    <p>虚拟滚动组件demo</p>
-    <TinyVirtualScroll :data="showData" :estimatedItemSize="50" :viewSize="600" itemIndex="id" class="ho"
-      direction="vertical">
+    <TinyVirtualScroll :data="showData" :estimatedItemSize="50" itemIndex="id" class="tiny-virtual-scroll"
+      direction="vertical" :buffer="0.5">
       <template #default="props">
-        <div class="scroll-item">
+        <div class="tiny-virtual-scroll-item">
           {{ props.item.value }}
         </div>
       </template>
@@ -28,8 +27,8 @@ export default {
   created() {
     // 生成动态高度的数据
     this.showData = Array.from({ length: 10000 }, (_, i) => ({
-      id: i,
-      value: `${i}字符内容`.repeat(Math.ceil(Math.random() * 30)) // 动态文本内容
+      id: i + 1,
+      value: `${i + 1}字符内容`.repeat(Math.ceil(Math.random() * 30)) // 动态文本内容
     }))
   }
 }
@@ -42,11 +41,11 @@ export default {
   /* width: 600px; */
 }
 
-.ho {
-  height: 100px;
+.tiny-virtual-scroll {
+  height: 400px;
 }
 
-.scroll-item {
+.tiny-virtual-scroll-item {
   padding: 10px;
   border-bottom: 2px solid #ddd;
 }
diff --git a/examples/sites/demos/pc/app/virtual-scroll/show-status-composition-api.vue b/examples/sites/demos/pc/app/virtual-scroll/show-status-composition-api.vue
new file mode 100644
index 0000000000..0acc11d0cb
--- /dev/null
+++ b/examples/sites/demos/pc/app/virtual-scroll/show-status-composition-api.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="scrollTo-demo">
+    <div class="check">
+      <tiny-button type="primary" plain @click="showScroll = !showScroll">切换可见性</tiny-button>
+    </div>
+    <div class="context" v-show="showScroll">
+      <TinyVirtualScroll ref="scroller" :data="showData" :itemSize="50" itemIndex="key" class="tiny-virtual-scroll"
+        direction="vertical">
+        <template #default="props">
+          <div class="tiny-virtual-scroll-item">
+            {{ props.item.value }}
+          </div>
+        </template>
+      </TinyVirtualScroll>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { Button as TinyButton, VirtualScroll as TinyVirtualScroll } from '@opentiny/vue'
+
+const showScroll = ref(true)
+const showData = ref([])
+// 生成模拟数据
+showData.value = Array.from(Array(1000), (v, k) => {
+  return {
+    value: `第${k + 1}项`,
+    key: k
+  }
+})
+</script>
+
+<style scoped>
+.scrollTo-demo {
+  text-align: center;
+  height: 100%;
+  overflow: hidden;
+}
+
+.scrollTo-demo .check {
+  justify-content: flex-start;
+  margin-bottom: 10px;
+}
+
+.scrollTo-demo .check .tiny-button {
+  display: block;
+  width: 150px;
+
+  text-align: center;
+}
+
+.scrollTo-demo .context .tiny-virtual-scroll {
+  height: 300px;
+}
+
+.scrollTo-demo .context .tiny-virtual-scroll .tiny-virtual-scroll-item {
+  padding: 10px;
+  border-bottom: 2px solid #ddd;
+  width: 100%;
+  align-content: center;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/virtual-scroll/show-status.spec.ts b/examples/sites/demos/pc/app/virtual-scroll/show-status.spec.ts
new file mode 100644
index 0000000000..23289cede6
--- /dev/null
+++ b/examples/sites/demos/pc/app/virtual-scroll/show-status.spec.ts
@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('virtual-scroll#show-status')
+  const virtualScroll = page.locator('#show-status .tiny-virtual-scroll')
+  const toggleButton = page.locator('.check .tiny-button')
+  const virtualScrollItem = virtualScroll.locator('.tiny-virtual-scroll-item')
+  await expect(virtualScroll).toBeVisible()
+  await expect(virtualScrollItem.nth(0)).toBeVisible()
+
+  const visibilityTest = async (isVisible) => {
+    if (isVisible) {
+      await expect(virtualScroll).toBeVisible()
+      await expect(virtualScrollItem.nth(0)).toBeVisible()
+    } else {
+      await expect(virtualScroll).toBeHidden()
+      await expect(virtualScrollItem.nth(0)).toBeHidden()
+    }
+  }
+  await visibilityTest(true)
+  await page.waitForTimeout(1000)
+  await toggleButton.click()
+  await visibilityTest(false)
+  await page.waitForTimeout(1000)
+  await toggleButton.click()
+  await visibilityTest(true)
+})
diff --git a/examples/sites/demos/pc/app/virtual-scroll/show-status.vue b/examples/sites/demos/pc/app/virtual-scroll/show-status.vue
new file mode 100644
index 0000000000..e9d13da56b
--- /dev/null
+++ b/examples/sites/demos/pc/app/virtual-scroll/show-status.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="scrollTo-demo">
+    <div class="check">
+      <tiny-button type="primary" plain @click="showScroll = !showScroll">切换可见性</tiny-button>
+    </div>
+    <div class="context" v-show="showScroll">
+      <TinyVirtualScroll ref="scroller" :data="showData" :itemSize="50" itemIndex="key" class="tiny-virtual-scroll"
+        direction="vertical">
+        <template #default="props">
+          <div class="tiny-virtual-scroll-item">
+            {{ props.item.value }}
+          </div>
+        </template>
+      </TinyVirtualScroll>
+    </div>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Button, VirtualScroll } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyVirtualScroll: VirtualScroll
+  },
+  data() {
+    return {
+      showData: [],
+      showScroll: true
+    }
+  },
+  created() {
+    // 生成模拟数据
+    this.showData = Array.from(Array(1000), (v, k) => {
+      return {
+        value: `第${k + 1}项`,
+        key: k + 1
+      }
+    })
+  }
+}
+</script>
+
+<style scoped>
+.scrollTo-demo {
+  text-align: center;
+  height: 100%;
+  overflow: hidden;
+}
+
+.scrollTo-demo .check {
+  justify-content: flex-start;
+  margin-bottom: 10px;
+}
+
+.scrollTo-demo .check .tiny-button {
+  display: block;
+  width: 150px;
+
+  text-align: center;
+}
+
+.scrollTo-demo .context .tiny-virtual-scroll {
+  height: 300px;
+}
+
+.scrollTo-demo .context .tiny-virtual-scroll .tiny-virtual-scroll-item {
+  padding: 10px;
+  border-bottom: 2px solid #ddd;
+  width: 100%;
+  align-content: center;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/virtual-scroll/specified-item-composition-api.vue b/examples/sites/demos/pc/app/virtual-scroll/specified-item-composition-api.vue
new file mode 100644
index 0000000000..e397bf9ea8
--- /dev/null
+++ b/examples/sites/demos/pc/app/virtual-scroll/specified-item-composition-api.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="scrollTo-demo">
+    <div class="footer">
+      <tiny-button type="primary" plain @click="scrollToItem">滚动到</tiny-button>
+      <tiny-input type="number" v-model.number="scrollto" :min="1" :max="showData.length"></tiny-input>
+    </div>
+    <div class="main">
+      <TinyVirtualScroll ref="scroller" :data="showData" :itemSize="50" itemIndex="key" class="tiny-virtual-scroll"
+        direction="vertical">
+        <template #default="props">
+          <div class="tiny-virtual-scroll-item">
+            {{ props.item.value }}
+          </div>
+        </template>
+      </TinyVirtualScroll>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { Button as TinyButton, Input as TinyInput, VirtualScroll as TinyVirtualScroll } from '@opentiny/vue'
+
+const showData = ref([])
+const scrollto = ref(1)
+const scroller = ref(null)
+const scrollToItem = () => {
+  if (scroller.value) {
+    scroller.value.scrollToItem(scrollto.value)
+  }
+}
+
+// 生成模拟数据
+showData.value = Array.from(Array(1000), (v, k) => {
+  return {
+    value: `第${k + 1}项`,
+    key: k
+  }
+})
+</script>
+
+<style scoped>
+.scrollTo-demo {
+  text-align: center;
+  height: 100%;
+  overflow: hidden;
+}
+
+.footer {
+  margin-bottom: 10px;
+}
+
+.scrollTo-demo .footer.tiny-button {
+  display: inline-block;
+  width: 60px;
+}
+
+.scrollTo-demo .footer .tiny-input {
+  width: 250px;
+}
+
+.scrollTo-demo .main .tiny-virtual-scroll {
+  height: 300px;
+}
+
+.scrollTo-demo .main .tiny-virtual-scroll .tiny-virtual-scroll-item {
+  padding: 10px;
+  border-bottom: 2px solid #ddd;
+  width: 100%;
+  align-content: center;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/virtual-scroll/specified-item.spec.ts b/examples/sites/demos/pc/app/virtual-scroll/specified-item.spec.ts
new file mode 100644
index 0000000000..933904a37f
--- /dev/null
+++ b/examples/sites/demos/pc/app/virtual-scroll/specified-item.spec.ts
@@ -0,0 +1,44 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('virtual-scroll#specified-item')
+  const virtualScroll = page.locator('#specified-item .tiny-virtual-scroll')
+  const scrollButton = page.locator('.scrollTo-demo > .footer > .tiny-button')
+  const scrollInput = await page.locator('.scrollTo-demo > .footer > .tiny-input > .tiny-input-display-only > input')
+  const virtualScrollItem = virtualScroll.locator('.tiny-virtual-scroll-item')
+  await expect(virtualScroll).toBeVisible()
+  await expect(virtualScrollItem.nth(0)).toBeVisible()
+  await expect(scrollInput).toBeVisible()
+  await scrollInput.fill('100')
+  await scrollButton.click()
+  await page.waitForTimeout(500)
+  const containerBox = await virtualScroll.boundingBox()
+  let firstVisibleItem = null
+  const visibleItemsCount = await virtualScrollItem.count()
+  for (let i = 0; i < visibleItemsCount; i++) {
+    const itemBox = await virtualScrollItem.nth(i).boundingBox()
+    if (itemBox && containerBox) {
+      if (itemBox.y >= containerBox.y && itemBox.y + itemBox.height <= containerBox.y + containerBox.height) {
+        firstVisibleItem = virtualScrollItem.nth(i)
+        break
+      }
+    }
+  }
+  if (firstVisibleItem) {
+    const firstVisibleItemText = await firstVisibleItem.textContent()
+    expect(firstVisibleItemText).toContain('第100项')
+  } else {
+    throw new Error('没有找到显示区域中的第一个项目')
+  }
+  await scrollInput.fill('1')
+  await scrollButton.click()
+  await page.waitForTimeout(1000)
+  const firstItem = virtualScrollItem.nth(0)
+  await expect(firstItem).toBeVisible()
+  await scrollInput.fill('1000') // 最大索引
+  await scrollButton.click()
+  await page.waitForTimeout(1000)
+  const lastItem = virtualScrollItem.last()
+  await expect(lastItem).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/virtual-scroll/specified-item.vue b/examples/sites/demos/pc/app/virtual-scroll/specified-item.vue
new file mode 100644
index 0000000000..6d91404426
--- /dev/null
+++ b/examples/sites/demos/pc/app/virtual-scroll/specified-item.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="scrollTo-demo">
+    <div class="footer">
+      <tiny-button type="primary" plain @click="$refs.scroller.scrollToItem(scrollto)">滚动到</tiny-button>
+      <tiny-input type="number" v-model.number="scrollto" :min="1" :max="showData.length"></tiny-input>
+    </div>
+    <div class="main">
+      <TinyVirtualScroll ref="scroller" :data="showData" :itemSize="50" itemIndex="key" class="tiny-virtual-scroll"
+        direction="vertical">
+        <template #default="props">
+          <div class="tiny-virtual-scroll-item">
+            {{ props.item.value }}
+          </div>
+        </template>
+      </TinyVirtualScroll>
+    </div>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Button, Input, VirtualScroll } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyInput: Input,
+    TinyVirtualScroll: VirtualScroll
+  },
+  data() {
+    return {
+      scrollto: 1,
+      showData: []
+    }
+  },
+  created() {
+    // 生成模拟数据
+    this.showData = Array.from(Array(1000), (v, k) => {
+      return {
+        value: `第${k + 1}项`,
+        key: k + 1
+      }
+    })
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.scrollTo-demo {
+  text-align: center;
+  height: 100%;
+  overflow: hidden;
+}
+
+.footer {
+  margin-bottom: 10px;
+}
+
+.scrollTo-demo .footer.tiny-button {
+  display: inline-block;
+  width: 60px;
+}
+
+.scrollTo-demo .footer .tiny-input {
+  width: 250px;
+}
+
+.scrollTo-demo .main .tiny-virtual-scroll {
+  height: 300px;
+}
+
+.scrollTo-demo .main .tiny-virtual-scroll .tiny-virtual-scroll-item {
+  padding: 10px;
+  border-bottom: 2px solid #ddd;
+  width: 100%;
+  align-content: center;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/virtual-scroll/webdoc/virtual-scroll.cn.md b/examples/sites/demos/pc/app/virtual-scroll/webdoc/virtual-scroll.cn.md
index dfd6cd0704..e457840162 100644
--- a/examples/sites/demos/pc/app/virtual-scroll/webdoc/virtual-scroll.cn.md
+++ b/examples/sites/demos/pc/app/virtual-scroll/webdoc/virtual-scroll.cn.md
@@ -4,4 +4,4 @@ title: VirtualScroll 虚拟滚动
 
 # VirtualScroll 虚拟滚动
 
-<div>可进行大量数据的滚动.</div>
\ No newline at end of file
+<div>虚拟滚动可以在不加载所有数据的情况下，实现流畅的滚动体验。其核心是只渲染可视区域内的数据，当滚动列表时，动态加载并渲染新的数据。</div>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/app/virtual-scroll/webdoc/virtual-scroll.en.md b/examples/sites/demos/pc/app/virtual-scroll/webdoc/virtual-scroll.en.md
index eef398e21c..e47169cf1a 100644
--- a/examples/sites/demos/pc/app/virtual-scroll/webdoc/virtual-scroll.en.md
+++ b/examples/sites/demos/pc/app/virtual-scroll/webdoc/virtual-scroll.en.md
@@ -4,4 +4,4 @@ title: Virtual Scroll
 
 # Virtual Scroll 
 
-<div>Large amount of data can be rolled over.</div>
\ No newline at end of file
+<div>Virtual scrolling allows for a smooth scrolling experience without loading all the data. At its core, it renders only the data within the visual area, and dynamically loads and renders new data when the list is scrolled.</div>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/app/virtual-scroll/webdoc/virtual-scroll.js b/examples/sites/demos/pc/app/virtual-scroll/webdoc/virtual-scroll.js
index 53b5e635e4..09c710d80e 100644
--- a/examples/sites/demos/pc/app/virtual-scroll/webdoc/virtual-scroll.js
+++ b/examples/sites/demos/pc/app/virtual-scroll/webdoc/virtual-scroll.js
@@ -9,8 +9,8 @@ export default {
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN': '<p>通过data数据源来传输数据</p>\n',
-        'en-US': '<p>Transferring data through a data source</p>\n'
+        'zh-CN': '<p>通过data数据源来传输数据。</p>\n',
+        'en-US': '<p>Transferring data through a data source.</p>\n'
       },
       codeFiles: ['basic-usage.vue']
     },
@@ -18,14 +18,38 @@ export default {
       demoId: 'dynamic-height',
       name: {
         'zh-CN': '动态高度',
-        'en-US': 'dynamic-height'
+        'en-US': 'Dynamic Height'
       },
       desc: {
-        'zh-CN': '<p>estimatedItemSize预估高度，实现不知道高度的数据的虚拟滚动</p>\n',
+        'zh-CN': '<p>使用estimatedItemSize预估高度,实现未知高度的数据的虚拟滚动。</p>\n',
         'en-US':
-          '<p>estimatedItemSize estimates the height and enables virtual scrolling of data that does not know the height</p>\n'
+          '<p>estimatedItemSize estimates the height and enables virtual scrolling of data that does not know the height</p>\n.'
       },
       codeFiles: ['dynamic-height.vue']
+    },
+    {
+      demoId: 'specified-item',
+      name: {
+        'zh-CN': '滚动指定索引项目',
+        'en-US': 'Scrolls the specified index item'
+      },
+      desc: {
+        'zh-CN': '<p>输入框选择项目索引，可滚动到指定项目。</p>\n',
+        'en-US': '<p>Input box to select an item index to scroll to a specific item.</p>\n.'
+      },
+      codeFiles: ['specified-item.vue']
+    },
+    {
+      demoId: 'show-status',
+      name: {
+        'zh-CN': '显示状态',
+        'en-US': 'show status'
+      },
+      desc: {
+        'zh-CN': '<p>点击按钮，切换数据显示的状态。</p>\n',
+        'en-US': '<p>Click the button to toggle the state of the data display.</p>\n.'
+      },
+      codeFiles: ['show-status.vue']
     }
   ]
 }
diff --git a/packages/renderless/src/virtual-scroll/index.ts b/packages/renderless/src/virtual-scroll/index.ts
index 51409d4f54..5799210ed8 100644
--- a/packages/renderless/src/virtual-scroll/index.ts
+++ b/packages/renderless/src/virtual-scroll/index.ts
@@ -9,28 +9,7 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-// start, end
-// 二分法查找
-const binarySearch = (list, value) => {
-  let start = 0
-  let end = list.length - 1
-  let tempIndex = null
-  while (start <= end) {
-    let midIndex = parseInt((start + end) / 2)
-    let midValue = list[midIndex].bottom
-    if (midValue === value) {
-      return midIndex + 1
-    } else if (midValue < value) {
-      start = midIndex + 1
-    } else if (midValue > value) {
-      if (tempIndex === null || tempIndex > midIndex) {
-        tempIndex = midIndex
-      }
-      end = end - 1
-    }
-  }
-  return tempIndex
-}
+import binarySearch from './utils/utils'
 
 // 获取列表起始索引
 const getStartIndex = ({ state, scrollTop = 0 }) => {
@@ -39,7 +18,6 @@ const getStartIndex = ({ state, scrollTop = 0 }) => {
   return binarySearch(state.positions, scrollTop)
 }
 
-// pos = 1w, n = 20, 1w-n * n
 // 渲染后更新列表
 export const updatePositions =
   ({ state, items, props }) =>
@@ -50,8 +28,8 @@ export const updatePositions =
     let dValue = 0
     const attr = props.direction === 'vertical' ? 'height' : 'width'
     nodes.forEach((node) => {
-      const s = node.getBoundingClientRect()[attr] // 获取列表大小和位置的对象
-      let index = +node.id.slice(1) // 索引
+      const s = node.getBoundingClientRect()[attr]
+      let index = +node.id.slice(1)
       let oldS = positions[index].height
       dValue = oldS - s
       if (!dValue) return
@@ -64,65 +42,80 @@ export const updatePositions =
         positions[k].bottom = positions[k].bottom - dValue
       }
     })
-    console.log(dValue, nodes.length, positions.length, 'd')
     if (!dValue || !nodes.length) return
     for (let k = nodes.length; k < positions.length; k++) {
       positions[k].top = positions[k - 1].bottom
       positions[k].bottom = positions[k].bottom - dValue
     }
+    if (!dValue) return
   }
 
 // 计算数据总高度
-export const calculateTotalSize =
-  ({ props, state }) =>
-  () => {
-    if (props.itemSize) {
-      return props.itemSize * state.data.length
-    } else if (state.positions && state.positions.length > 0) {
-      return state.positions[state.positions.length - 1].bottom
-    } else {
-      return 0
-    }
+export const calculateTotalSize = ({ props, state }) => {
+  if (props.itemSize) {
+    return props.itemSize * state.data.length
   }
-
+  const lastPosition = state.positions?.[state.positions.length - 1]
+  return lastPosition ? lastPosition.bottom : 0
+}
 // 虚拟滚动逻辑
 export const handleScroll = ({ props, state, virtualScroll, nextTick, items, ...rest }) => {
-  return async (event) => {
+  let animationFrameId: number | null = null
+  const processScroll = async () => {
     if (!virtualScroll.value) return
     await nextTick()
-    const size = virtualScroll.value.getBoundingClientRect()[props.direction === 'vertical' ? 'height' : 'width']
-    const viewNum = Math.floor(size / (props.itemSize ?? props.estimatedItemSize))
-    // console.log(virtualScroll.value.getBoundingClientRect().height, viewNum, state)
-
+    let start, end, totalSize, bufferSize
+    const size = props.direction === 'vertical' ? virtualScroll.value.clientHeight : virtualScroll.value.clientWidth
+    const viewNum = Math.ceil(size / (props.itemSize ?? props.estimatedItemSize))
     const scrollPosition =
       props.direction === 'vertical' ? virtualScroll.value.scrollTop : virtualScroll.value.scrollLeft
-    if (props.itemSize) {
-      // const viewNum = Math.ceil(props.viewSize / props.itemSize) // 向上取整得到可视页面显示的条数
-      const viewStart = ~~(scrollPosition / props.itemSize) // 向下取整得到滚动区域的显示的第一条的索引
+    if (state.temporary.prerender) {
+      start = 0
+      end = Math.min(props.prerender, state.data.length)
+      totalSize = null
+    } else {
+      if (props.itemSize) {
+        const viewStart = ~~(scrollPosition / props.itemSize)
 
-      // 计算缓存区的大小对应的条数
-      const bufferItems = props.buffer * viewNum
-      // 计算要显示的范围，使用Diff算法来更新数据范围
-      const start = viewStart - viewNum - bufferItems > 0 ? viewStart - viewNum - bufferItems : 0 // 上一屏第一条下标
-      const end =
-        viewStart + 2 * viewNum + bufferItems < state.data.length
-          ? viewStart + 2 * viewNum + bufferItems
-          : state.data.length // 下一屏最后一个数据的索引（以免超出范围）
+        // 计算缓存区的大小对应的条数
+        const bufferItems = props.buffer * viewNum
+        // 计算要显示的范围，使用Diff算法来更新数据范围
+        start = viewStart - bufferItems > 0 ? viewStart - bufferItems : 0
+        end =
+          viewStart + viewNum + bufferItems < state.data.length ? viewStart + viewNum + bufferItems : state.data.length
 
-      state.visibleData = state.data.slice(start, end) // 间接利用Diff算法来算出上下屏的显示范围，将全列表数据按照范围给到显示数据中
-      state.translate = start * props.itemSize // 实现平滑过渡，先渲染上一屏的内容，然后再渲染显示区域的内容
-      return
-    }
+        state.visibleData = state.data.slice(start, end)
+        state.translate = start * props.itemSize
+        return
+      }
 
-    // 使用动态渲染
-    const startIndex = getStartIndex({ state, scrollTop: scrollPosition }) //*
-    const start = startIndex > 0 ? startIndex : 0
-    const end = Math.min(startIndex + viewNum + 2, state.data.length)
-    state.visibleData = state.data.slice(start, end) // 计算新的可视数据
-    state.translate = start >= 1 ? state.positions[start - 1].bottom : 0
-    state.translate = state.translate > 0 ? state.translate : 0
-    await nextTick(updatePositions({ state, items, props }))
-    state.totalSize = calculateTotalSize({ state, props })
+      // 使用动态渲染
+      const startIndex = getStartIndex({ state, scrollTop: scrollPosition })
+      const bufferCount = viewNum * props.buffer
+      const endIndex = startIndex + viewNum
+      const aboveCount = Math.min(startIndex, bufferCount)
+      const belowCount = Math.min(state.data.length - endIndex, bufferCount)
+      start = startIndex - aboveCount
+      end = endIndex + belowCount
+      state.visibleData = state.data.slice(start, end) // 计算新的可视数据
+      if (startIndex >= 1) {
+        bufferSize = state.positions[startIndex].top - (state.positions[start] ? state.positions[start].top : 0)
+        state.translate = state.positions[startIndex - 1].bottom - bufferSize
+      } else {
+        state.translate = 0
+      }
+      await updatePositions({ state, items, props })
+      totalSize = calculateTotalSize({ state, props })
+    }
+    state.totalSize = totalSize
+  }
+  return (event) => {
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId)
+    }
+    animationFrameId = requestAnimationFrame(() => {
+      processScroll()
+    })
   }
 }
 
@@ -137,3 +130,25 @@ export const initPositions =
       height: props.estimatedItemSize
     }))
   }
+// 滚动到指定距离
+export const scrollToPosition =
+  ({ virtualScroll, props }) =>
+  (position) => {
+    const scrollProperty = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft'
+    const viewPort = virtualScroll.value
+    if (viewPort) {
+      viewPort[scrollProperty] = position
+    }
+  }
+// 滚动到指定项目
+export const scrollToItem =
+  ({ api, props, state }) =>
+  (index) => {
+    let position
+    if (props.itemSize === null) {
+      position = index > 0 ? state.positions[index - 1].bottom : 0 // 无
+    } else {
+      position = (index - 1) * props.itemSize
+    }
+    api.scrollToPosition(position)
+  }
diff --git a/packages/renderless/src/virtual-scroll/utils/utils.ts b/packages/renderless/src/virtual-scroll/utils/utils.ts
new file mode 100644
index 0000000000..0a989b6147
--- /dev/null
+++ b/packages/renderless/src/virtual-scroll/utils/utils.ts
@@ -0,0 +1,22 @@
+// 二分法查找
+const binarySearch = (list: Array, value: Number) => {
+  let start = 0
+  let end = list.length - 1
+  let tempIndex = null
+  while (start <= end) {
+    let midIndex = parseInt((start + end) / 2)
+    let midValue = list[midIndex].bottom
+    if (midValue === value) {
+      return midIndex + 1
+    } else if (midValue < value) {
+      start = midIndex + 1
+    } else if (midValue > value) {
+      if (tempIndex === null || tempIndex > midIndex) {
+        tempIndex = midIndex
+      }
+      end = end - 1
+    }
+  }
+  return tempIndex
+}
+export default binarySearch
diff --git a/packages/renderless/src/virtual-scroll/vue.ts b/packages/renderless/src/virtual-scroll/vue.ts
index 0878b10780..63fc820d95 100644
--- a/packages/renderless/src/virtual-scroll/vue.ts
+++ b/packages/renderless/src/virtual-scroll/vue.ts
@@ -10,11 +10,16 @@
  *
  */
 
-// 定义组件的整体架构和生命周期管理
-import { initPositions, updatePositions, calculateTotalSize, handleScroll } from './index'
+import {
+  initPositions,
+  updatePositions,
+  calculateTotalSize,
+  handleScroll,
+  scrollToItem,
+  scrollToPosition
+} from './index'
 import { initService } from '../user'
 
-// 提供函数索引
 export const api = [
   'state',
   'handleScroll',
@@ -22,25 +27,23 @@ export const api = [
   'items',
   'initPositions',
   'updatePositions',
-  'calculateTotalSize'
+  'calculateTotalSize',
+  'scrollToItem'
 ]
-// 管理virtual-scroll相关的逻辑和状态，不涉及实际渲染部分
-export const renderless = (props, { reactive, nextTick, watch, computed, onMounted, ref, onUpdated }, { service }) => {
+export const renderless = (props, { reactive, nextTick, watch, onMounted, ref }, { service }) => {
   service = initService({ props, service })
 
   const api = {}
-  // 初始化状态（与data类似）
   const state = reactive({
     data: [...props.data],
     visibleData: [],
     translate: 0,
     totalSize: 0,
-    // totalSize: computed(() => ()),
-    positions: [] // 不定高度的列表缓存
+    positions: [], // 不定高度的列表缓存
+    lastUpdateTime: Date.now()
   })
-  const virtualScroll = ref(null) // 初始为 null，实际 DOM 元素在挂载时会赋值
+  const virtualScroll = ref(null)
   const items = ref([]) // 列表数组*
-  // 将处理virtual-scroll的方法绑定到api中（用initApi函数调用index.ts中的方法，添加到api对象）
   Object.assign(api, {
     state,
     virtualScroll,
@@ -48,54 +51,34 @@ export const renderless = (props, { reactive, nextTick, watch, computed, onMount
     handleScroll: handleScroll({ state, props, virtualScroll, nextTick, items }),
     updatePositions: updatePositions({ state, items, props }),
     initPositions: initPositions({ props, state }),
-    calculateTotalSize: calculateTotalSize({ props, state })
+    calculateTotalSize: calculateTotalSize({ props, state }),
+    scrollToItem: scrollToItem({ api, props, state }),
+    scrollToPosition: scrollToPosition({ api, virtualScroll, state, props })
   })
+  api.initPositions()
+  state.temporary = {}
+  if (props.prerender) {
+    state.temporary.prerender = true
+    api.handleScroll()
+  }
 
   // 组件挂载后加载滚动事件
   onMounted(() => {
     if (!virtualScroll.value) return
-    api.initPositions()
-    api.handleScroll()
-    state.totalSize = api.calculateTotalSize()
+    nextTick(() => {
+      api.initPositions()
+      state.temporary.prerender = false
+      api.handleScroll()
+      state.totalSize = api.calculateTotalSize
+    })
   })
-
-  // 列表完成获取列表的每一项并完成(重新渲染并更新DOM之后被调用)
-  // watch(items, () => nextTick(api.updatePositions), {
-  //   deep: true,
-  //   flush: 'post'
-  // })
-  // 监听属性和状态的变化+处理相应的逻辑（调用事件处理函数）+会调用index.ts的样式计算函数来调整样式
   watch(
     () => state.visibleData,
     (newVisibleData) => {
-      state.totalSize = api.calculateTotalSize()
-    },
-    { immediate: true }
-  )
-  watch(
-    () => state.translate,
-    (newTranslate) => {
-      // 当 translate 变化时的处理逻辑
-      // 可以在这里处理平移变化带来的影响
-    },
-    { immediate: true }
-  )
-  watch(
-    () => props.data,
-    (newData) => {
-      state.data = [...newData]
-      // api.initPositions()
-    },
-    { immediate: true }
-  )
-  watch(
-    () => props.viewSize,
-    (newViewSize) => {
-      // api.handleScroll() // 视图高度变化时重新计算可视数据和滚动位置
+      state.totalSize = api.calculateTotalSize
     },
     { immediate: true }
   )
 
-  // 返回所有方法的api对象
   return api
 }
diff --git a/packages/theme/src/virtual-scroll/index.less b/packages/theme/src/virtual-scroll/index.less
index c557dbe8fe..6ebbbc0e8e 100644
--- a/packages/theme/src/virtual-scroll/index.less
+++ b/packages/theme/src/virtual-scroll/index.less
@@ -13,22 +13,19 @@
 @import './vars.less';
 
 @virtualscroll-prefix-cls: ~'@{css-prefix}virtual-scroll';
-// 为整个虚拟滚动组件设计样式（类似于）
 .@{virtualscroll-prefix-cls} {
   .component-css-vars-virtual-scroll();
 
-  // 外层容器：virtual-scroll
   position: relative;
   overflow: auto;
-  background-color: rgba(108, 241, 196, 0.822);
-  // 确保虚拟滚动内容
+  background-color: rgba(151, 205, 255, 0.822);
+
   & > .virtual-scroll-context {
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     z-index: -1;
-    // width: 100%;
   }
 
   // 实际渲染区域
@@ -37,7 +34,6 @@
     top: 0;
     left: 0;
     display: flex;
-    // overflow: hidden;
   }
 
   // 每项内容
diff --git a/packages/vue/src/virtual-scroll/index.ts b/packages/vue/src/virtual-scroll/index.ts
index ad806bb1ea..5585beb4d9 100644
--- a/packages/vue/src/virtual-scroll/index.ts
+++ b/packages/vue/src/virtual-scroll/index.ts
@@ -7,7 +7,6 @@ VirtualScroll.model = {
   prop: 'modelValue',
   event: 'update:modelValue'
 }
-// 虚拟滚动组件的入口文件---引入vitual-scroll组件的入口文件和全局注册
 /* istanbul ignore next */
 VirtualScroll.install = function (Vue) {
   Vue.component(VirtualScroll.name, VirtualScroll)
diff --git a/packages/vue/src/virtual-scroll/src/index.ts b/packages/vue/src/virtual-scroll/src/index.ts
index b9c35572ca..4be3b5707b 100644
--- a/packages/vue/src/virtual-scroll/src/index.ts
+++ b/packages/vue/src/virtual-scroll/src/index.ts
@@ -1,17 +1,13 @@
 import { $props, $setup, $prefix, defineComponent } from '@opentiny/vue-common'
 import PCTemplate from './pc.vue'
 
-// import MobileTemplate from './mobile.vue'
-// 基本配置和属性
 const $constants = {}
-// template是对于不同模板的传入进行选择模式
 const template = (mode) => {
   return (process.env.TINY_MODE || mode) === 'mobile-first' ? null : PCTemplate
 }
 
 export default defineComponent({
   name: $prefix + 'VirtualScroll',
-  // 定义虚拟滚动的外部接口
   props: {
     ...$props,
     _constants: {
@@ -26,18 +22,12 @@ export default defineComponent({
       },
       require: true
     },
-    viewSize: {
-      // 可视区域高度
-      type: Number
-      // default: 600
-    },
     itemSize: {
       // 每条数据高度
       type: Number
-      // default: 30
     },
     itemIndex: {
-      // 数组的唯一标识字段，可以很大程度提升性能
+      // 数组的唯一标识字段
       type: String,
       default: 'id',
       require: true
@@ -45,21 +35,25 @@ export default defineComponent({
     estimatedItemSize: {
       // 预估每项的高度
       type: Number
-      // required: true
     },
     direction: {
       // 滚动方向
       type: String,
-      default: 'vertical', // 可选值：'vertical' | 'horizontal'
+      default: 'vertical',
       validator: (value) => ['vertical', 'horizontal'].includes(value)
     },
     buffer: {
       // 缓冲区
       type: Number,
       default: 1
+    },
+    prerender: {
+      // 预渲染条数
+      type: Number,
+      default: 0
     }
   },
-  // 初始化组件，传入props和context以及模板内容，props传给pc.vue
+
   setup(props, context) {
     return $setup({ props, context, template })
   }
diff --git a/packages/vue/src/virtual-scroll/src/pc.vue b/packages/vue/src/virtual-scroll/src/pc.vue
index aa395d3beb..0d420bd165 100644
--- a/packages/vue/src/virtual-scroll/src/pc.vue
+++ b/packages/vue/src/virtual-scroll/src/pc.vue
@@ -1,16 +1,9 @@
 <template>
-  <!-- 可视区域 -->
-  <!-- viewHeight是在使用中设置可视区域高度图 -->
-  <!-- {{ JSON.stringify(state) }} -->
-  <div class="tiny-virtual-scroll" ref="virtualScroll" @scroll="handleScroll" :style="direction === 'vertical' ? { 'height': `${viewSize}px` } : { 'width': `${viewSize}px`, whiteSpace: 'nowrap' }
-    ">
-    <!-- 调试用，查看direction属性值 -->
-    <!-- 内容容器撑起滚动条(使用所有内容高度) -->
+  <div class="tiny-virtual-scroll" ref="virtualScroll" @scroll="handleScroll"
+    :style="direction === 'vertical' ? {} : { whiteSpace: 'nowrap' }">
     <div class="virtual-scroll-context"
       :style="direction === 'vertical' ? { 'height': `${state.totalSize}px` } : { 'width': `${state.totalSize}px` }">
     </div>
-
-    <!-- 实际渲染区域 (translateY实现上下平移的滚动效果-handlescroll来计算) -->
     <div class="virtual-scroll-wrapper" :style="direction === 'vertical'
         ? { 'transform': `translate3d(0,${state.translate}px,0)`, flexDirection: 'column' }
         : {
@@ -20,7 +13,6 @@
           // width: 'max-content'
         }
       ">
-      <!-- {{ JSON.stringify(state.visibleData) }} -->
       <!-- 每项内容 -->
       <div class="virtual-scroll-item" ref="items"
         :style="direction === 'vertical' ? { 'height': `${itemSize}px` } : { 'width': `${itemSize}px ` }"
@@ -36,11 +28,7 @@ import { renderless, api } from '@opentiny/vue-renderless/virtual-scroll/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
 
 export default defineComponent({
-  // 组件可能发出的事件
-  // emits: ['update:modelValue'],
-  // 组件接受的属性
-  props: [...props, 'data', 'viewSize', 'itemSize', 'itemIndex', 'direction', 'estimatedItemSize', 'buffer'],
-  // 函数初始化
+  props: [...props, 'data', 'itemSize', 'itemIndex', 'direction', 'estimatedItemSize', 'buffer', 'prerender'],
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }