diff --git a/packages/cdk/scroll/__tests__/__snapshots__/virtualScroll.spec.ts.snap b/packages/cdk/scroll/__tests__/__snapshots__/virtualScroll.spec.ts.snap
index 38e2f009e..f64db1999 100644
--- a/packages/cdk/scroll/__tests__/__snapshots__/virtualScroll.spec.ts.snap
+++ b/packages/cdk/scroll/__tests__/__snapshots__/virtualScroll.spec.ts.snap
@@ -1,8 +1,8 @@
 // Vitest Snapshot v1
 
 exports[`VirtualScroll > basic work > render work 1`] = `
-"<div class=\\"cdk-virtual-scroll cdk-virtual-scroll-overflowed-vertical\\">
-  <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px; width: 100%; overflow-x: auto; overflow-y: auto;\\">
+"<div class=\\"cdk-virtual-scroll\\">
+  <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px; width: 200px; overflow-x: auto; overflow-y: auto;\\">
     <!---->
     <div class=\\"cdk-virtual-scroll-filler-vertical\\" style=\\"height: 400px; width: 0px;\\"></div>
     <div class=\\"cdk-virtual-scroll-content\\" style=\\"margin-top: 0px; margin-left: 0px;\\"><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-0 - 0</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-1 - 1</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-2 - 2</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-3 - 3</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-4 - 4</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-5 - 5</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-6 - 6</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-7 - 7</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-8 - 8</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-9 - 9</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-10 - 10</span></div>
@@ -13,8 +13,8 @@ exports[`VirtualScroll > basic work > render work 1`] = `
 `;
 
 exports[`VirtualScroll > basic work > rowRender work 1`] = `
-"<div class=\\"cdk-virtual-scroll cdk-virtual-scroll-overflowed-vertical\\">
-  <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px; width: 100%; overflow-x: auto; overflow-y: auto;\\">
+"<div class=\\"cdk-virtual-scroll\\">
+  <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px; width: 200px; overflow-x: auto; overflow-y: auto;\\">
     <!---->
     <div class=\\"cdk-virtual-scroll-filler-vertical\\" style=\\"height: 400px; width: 0px;\\"></div>
     <div class=\\"cdk-virtual-scroll-content\\" style=\\"margin-top: 0px; margin-left: 0px;\\"><span class=\\"virtual-item\\">key-0 - 0</span><span class=\\"virtual-item\\">key-1 - 1</span><span class=\\"virtual-item\\">key-2 - 2</span><span class=\\"virtual-item\\">key-3 - 3</span><span class=\\"virtual-item\\">key-4 - 4</span><span class=\\"virtual-item\\">key-5 - 5</span><span class=\\"virtual-item\\">key-6 - 6</span><span class=\\"virtual-item\\">key-7 - 7</span><span class=\\"virtual-item\\">key-8 - 8</span><span class=\\"virtual-item\\">key-9 - 9</span><span class=\\"virtual-item\\">key-10 - 10</span></div>
diff --git a/packages/cdk/scroll/__tests__/virtualScroll.spec.ts b/packages/cdk/scroll/__tests__/virtualScroll.spec.ts
index 0a147d9a4..5018b1a50 100644
--- a/packages/cdk/scroll/__tests__/virtualScroll.spec.ts
+++ b/packages/cdk/scroll/__tests__/virtualScroll.spec.ts
@@ -2,7 +2,7 @@ import { MountingOptions, VueWrapper, flushPromises, mount } from '@vue/test-uti
 import { h } from 'vue'
 
 import VirtualScroll from '../src/virtual/VirtualScroll'
-import { VirtualRowRenderFn, VirtualScrollInstance, VirtualScrollProps } from '../src/virtual/types'
+import { VirtualColRenderFn, VirtualRowRenderFn, VirtualScrollInstance, VirtualScrollProps } from '../src/virtual/types'
 
 const getData = (length: number, key = 'key') => {
   const data: { key: string }[] = []
@@ -11,14 +11,29 @@ const getData = (length: number, key = 'key') => {
   }
   return data
 }
+const getGridData = (
+  rowLength: number,
+  colLength: number,
+  rowKey = 'row',
+  colKey = 'col',
+): { key: string; data: { key: string }[] }[] => {
+  const data = Array.from(new Array(rowLength)).map((_, rowIndex) => ({
+    key: `${rowKey}-${rowIndex}`,
+    data: Array.from(new Array(colLength)).map((_, colIndex) => ({ key: `${colKey}-${colIndex}` })),
+  }))
+
+  return data
+}
 
 const defaultProps = {
   height: 200,
+  width: 200,
   rowHeight: 20,
+  colWidth: 20,
   getKey: 'key',
 } as const
 
-const defaultItemSlot = `
+const defaultRowSlot = `
 <template #row="{ item, index }">
   <span class="virtual-item" style="height: 20px;">{{ item.key }} - {{ index }}</span>
 </template>
@@ -27,28 +42,37 @@ const defaultItemSlot = `
 describe('VirtualScroll', () => {
   const VirtualScrollMount = (options?: MountingOptions<Partial<VirtualScrollProps>>) => {
     const { props, ...rest } = options || {}
-    const mergedOptions = { props: { ...defaultProps, ...props }, ...rest } as MountingOptions<VirtualScrollProps>
-    const scrollHeight = (props?.dataSource?.length ?? 0) * 20
-
-    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => scrollHeight)
-
-    return mount(VirtualScroll, mergedOptions) as VueWrapper<VirtualScrollInstance>
+    const mergedOptions = {
+      props: { ...defaultProps, ...props },
+      ...rest,
+    } as MountingOptions<VirtualScrollProps>
+    const rowLength = props?.dataSource?.length
+    const scrollHeight = rowLength ? rowLength * 20 : 200
+    let colLength = 0
+
+    const row = props?.dataSource?.[0] as { data: unknown[] } | undefined
+
+    if (row?.data) {
+      colLength = row.data.length
+    }
+    const scrollWidth = colLength ? colLength * 20 : 200
+
+    const wrapper = mount(VirtualScroll, mergedOptions) as VueWrapper<VirtualScrollInstance>
+    const holderEl = wrapper.vm.getHolderElement()
+
+    vi.spyOn(holderEl, 'scrollHeight', 'get').mockImplementation(() => scrollHeight)
+    vi.spyOn(holderEl, 'scrollWidth', 'get').mockImplementation(() => scrollWidth)
+    vi.spyOn(holderEl, 'clientHeight', 'get').mockImplementation(() => 200)
+    vi.spyOn(holderEl, 'clientWidth', 'get').mockImplementation(() => 200)
+
+    return wrapper
   }
 
-  beforeAll(() => {
-    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 200)
-  })
-
-  afterEach(() => {
-    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockClear()
-    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockClear()
-  })
-
   describe('basic work', () => {
     test('render work', async () => {
       const wrapper = VirtualScrollMount({
         props: { dataSource: getData(20) },
-        slots: { item: defaultItemSlot },
+        slots: { row: defaultRowSlot },
       })
 
       expect(wrapper.html()).toMatchSnapshot()
@@ -62,7 +86,7 @@ describe('VirtualScroll', () => {
     test.skip('tag work', async () => {
       const wrapper = VirtualScrollMount({
         props: { dataSource: getData(20) },
-        slots: { item: defaultItemSlot },
+        slots: { item: defaultRowSlot },
       })
 
       expect(wrapper.find('.cdk-virtual-scroll-holder').element.tagName).toEqual('DIV')
@@ -80,7 +104,7 @@ describe('VirtualScroll', () => {
     test('dataSource work', async () => {
       const wrapper = VirtualScrollMount({
         props: { dataSource: getData(5) },
-        slots: { item: defaultItemSlot },
+        slots: { item: defaultRowSlot },
       })
 
       expect(wrapper.findAll('.virtual-item').length).toEqual(5)
@@ -97,7 +121,7 @@ describe('VirtualScroll', () => {
     test('fullHeight work', async () => {
       const wrapper = VirtualScrollMount({
         props: { dataSource: getData(5) },
-        slots: { item: defaultItemSlot },
+        slots: { item: defaultRowSlot },
       })
 
       expect(wrapper.find('.cdk-virtual-scroll-holder').attributes('style')).toContain('height: 200px')
@@ -114,7 +138,7 @@ describe('VirtualScroll', () => {
     test('height work', async () => {
       const wrapper = VirtualScrollMount({
         props: { dataSource: getData(5) },
-        slots: { item: defaultItemSlot },
+        slots: { item: defaultRowSlot },
       })
 
       expect(wrapper.find('.cdk-virtual-scroll-holder').attributes('style')).toContain('height: 200px')
@@ -134,7 +158,7 @@ describe('VirtualScroll', () => {
     test('itemHeight work', async () => {
       const wrapper = VirtualScrollMount({
         props: { dataSource: getData(5) },
-        slots: { item: defaultItemSlot },
+        slots: { item: defaultRowSlot },
       })
 
       expect(wrapper.findAll('.virtual-item').length).toEqual(5)
@@ -151,7 +175,7 @@ describe('VirtualScroll', () => {
     test('getKey work', async () => {
       const wrapper = VirtualScrollMount({
         props: { dataSource: getData(20) },
-        slots: { item: defaultItemSlot },
+        slots: { item: defaultRowSlot },
       })
 
       wrapper.findAll('.virtual-item').forEach((item, index) => expect(item.text()).toEqual(`key-${index} - ${index}`))
@@ -176,48 +200,92 @@ describe('VirtualScroll', () => {
 
   describe('scroll work', () => {
     test('scrollTo work', async () => {
+      const rowRender: VirtualRowRenderFn = ({ children }) => {
+        return h('div', { class: 'virtual-row' }, children)
+      }
+      const colRender: VirtualColRenderFn = ({ item, index }) => {
+        const { key } = item as { key: string }
+
+        return h('div', { class: 'virtual-col' }, [`${key}-${index}`])
+      }
+
       vi.useFakeTimers()
 
       const wrapper = VirtualScrollMount({
-        props: { dataSource: getData(40) },
-        slots: { item: defaultItemSlot },
+        props: { dataSource: getGridData(40, 40), rowRender, colRender },
       })
       expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(0)
 
       wrapper.vm.scrollTo(100)
       vi.runAllTimers()
-
       expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(100)
 
-      wrapper.vm.scrollTo({ index: 20, align: 'top' })
+      wrapper.vm.scrollTo({ rowIndex: 20, verticalAlign: 'top' })
       vi.runAllTimers()
-
       expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(400)
 
-      wrapper.vm.scrollTo({ index: 20, align: 'bottom' })
+      wrapper.vm.scrollTo({ rowIndex: 20, verticalAlign: 'bottom' })
       vi.runAllTimers()
-
       expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(220)
 
-      wrapper.vm.scrollTo({ key: 'key-20', align: 'top' })
+      wrapper.vm.scrollTo({ rowKey: 'row-20', verticalAlign: 'top' })
       vi.runAllTimers()
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(400)
 
+      wrapper.vm.scrollTo({ rowKey: 'row-20', verticalAlign: 'top', verticalOffset: 20 })
+      vi.runAllTimers()
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(380)
+
+      wrapper.vm.scrollTo({ top: 100, left: 100 })
+      vi.runAllTimers()
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(100)
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollLeft).toEqual(100)
+
+      wrapper.vm.scrollTo({ rowIndex: 20, colIndex: 20, verticalAlign: 'top', horizontalAlign: 'start' })
+      vi.runAllTimers()
       expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(400)
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollLeft).toEqual(400)
 
-      wrapper.vm.scrollTo({ key: 'key-20', align: 'top', offset: 20 })
+      wrapper.vm.scrollTo({ rowIndex: 20, colIndex: 20, verticalAlign: 'bottom', horizontalAlign: 'end' })
       vi.runAllTimers()
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(220)
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollLeft).toEqual(220)
 
+      wrapper.vm.scrollTo({ rowKey: 'row-20', colKey: 'col-20', verticalAlign: 'top', horizontalAlign: 'start' })
+      vi.runAllTimers()
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(400)
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollLeft).toEqual(400)
+
+      wrapper.vm.scrollTo({
+        rowKey: 'row-20',
+        colKey: 'col-20',
+        verticalAlign: 'top',
+        horizontalAlign: 'start',
+        verticalOffset: 20,
+        horizontalOffset: 20,
+      })
+      vi.runAllTimers()
       expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(380)
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollLeft).toEqual(380)
 
       wrapper.vm.scrollTo(9999)
       vi.runAllTimers()
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(600)
 
+      wrapper.vm.scrollTo({ top: 9999, left: 9999 })
+      vi.runAllTimers()
       expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(600)
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollLeft).toEqual(600)
 
       wrapper.vm.scrollTo(-1)
       vi.runAllTimers()
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(0)
 
+      wrapper.vm.scrollTo({ top: -1, left: -1 })
+      vi.runAllTimers()
       expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(0)
+      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollLeft).toEqual(0)
+
       vi.useRealTimers()
     })
 
@@ -225,7 +293,7 @@ describe('VirtualScroll', () => {
       const onScroll = vi.fn()
       const wrapper = VirtualScrollMount({
         props: { dataSource: getData(100) },
-        slots: { item: defaultItemSlot },
+        slots: { item: defaultRowSlot },
         attrs: { onScroll },
       })
 
@@ -239,7 +307,7 @@ describe('VirtualScroll', () => {
     test('moving work', async () => {
       const wrapper = VirtualScrollMount({
         props: { dataSource: getData(100) },
-        slots: { item: defaultItemSlot },
+        slots: { item: defaultRowSlot },
       })
 
       wrapper.find('.cdk-virtual-scroll-holder').trigger('touchstart', { touches: [{ pageY: 100 }] })
diff --git a/packages/cdk/scroll/demo/Basic.vue b/packages/cdk/scroll/demo/Basic.vue
index ebbdee78d..164d590f4 100644
--- a/packages/cdk/scroll/demo/Basic.vue
+++ b/packages/cdk/scroll/demo/Basic.vue
@@ -19,11 +19,13 @@
 
     <IxSpace>
       <IxButton @click="scrollTo(100)"> Scroll To 100px </IxButton>
-      <IxButton @click="scrollTo({ key: 'key-50', align: 'top' })"> Scroll To key-50(top) </IxButton>
+      <IxButton @click="scrollTo({ rowKey: 'key-50', verticalAlign: 'top' })"> Scroll To key-50(top) </IxButton>
       <IxButton @click="scrollTo({ index: 40, align: 'top' })"> Scroll To 40(top) </IxButton>
-      <IxButton @click="scrollTo({ index: 40, align: 'bottom' })"> Scroll To 40(bottom) </IxButton>
-      <IxButton @click="scrollTo({ index: 40, align: 'auto' })"> Scroll To 40(auto) </IxButton>
-      <IxButton @click="scrollTo({ index: 40, align: 'top', offset: 15 })"> Scroll To 40(top) + 15 offset </IxButton>
+      <IxButton @click="scrollTo({ rowIndex: 40, verticalAlign: 'bottom' })"> Scroll To 40(bottom) </IxButton>
+      <IxButton @click="scrollTo({ rowIndex: 40, verticalAlign: 'auto' })"> Scroll To 40(auto) </IxButton>
+      <IxButton @click="scrollTo({ rowIndex: 40, verticalAlign: 'top', offset: 15 })">
+        Scroll To 40(top) + 15 offset
+      </IxButton>
     </IxSpace>
   </div>
 </template>
diff --git a/packages/cdk/scroll/demo/Both.vue b/packages/cdk/scroll/demo/Both.vue
index 6401be15d..af7aa18de 100644
--- a/packages/cdk/scroll/demo/Both.vue
+++ b/packages/cdk/scroll/demo/Both.vue
@@ -14,13 +14,49 @@
         <span class="virtual-item" @click="onItemClick(item.key)">{{ row.key }} - {{ index }}</span>
       </template>
     </CdkVirtualScroll>
+    <IxSpace>
+      <IxButton @click="scrollTo({ top: 100, left: 100 })"> Scroll To [100px, 100px] </IxButton>
+      <IxButton
+        @click="scrollTo({ rowKey: 'row-key-50', colKey: 'col-key-50', verticalAlign: 'top', horizontalAlign: 'end' })"
+      >
+        Scroll To [row-key-50, col-key-50](top, end)
+      </IxButton>
+      <IxButton @click="scrollTo({ rowIndex: 40, colIndex: 40, verticalAlign: 'top', horizontalAlign: 'start' })">
+        Scroll To [40, 40](top, start)
+      </IxButton>
+      <IxButton @click="scrollTo({ rowIndex: 40, colIndex: 40, verticalAlign: 'bottom', horizontalAlign: 'end' })">
+        Scroll To [40, 40](bottom, end)
+      </IxButton>
+      <IxButton @click="scrollTo({ rowIndex: 40, colIndex: 40, verticalAlign: 'auto', horizontalAlign: 'auto' })">
+        Scroll To [40, 40](auto)
+      </IxButton>
+      <IxButton
+        @click="
+          scrollTo({
+            rowIndex: 100,
+            colIndex: 100,
+            verticalAlign: 'top',
+            horizontalAlign: 'end',
+            verticalOffset: 15,
+            horizontalOffset: 15,
+          })
+        "
+      >
+        Scroll To [100, 100](top, start) + 15 offset
+      </IxButton>
+    </IxSpace>
   </div>
 </template>
 
 <script setup lang="ts">
 import { h, ref } from 'vue'
 
-import { VirtualRowRenderFn, VirtualScrollInstance, VirtualScrollRowData } from '@idux/cdk/scroll'
+import {
+  VirtualRowRenderFn,
+  VirtualScrollInstance,
+  VirtualScrollRowData,
+  VirtualScrollToOptions,
+} from '@idux/cdk/scroll'
 
 const listRef = ref<VirtualScrollInstance>()
 const colData: { key: string }[] = []
@@ -47,6 +83,8 @@ const rowRender: VirtualRowRenderFn = ({ children }) =>
 const onItemClick = (key: string) => {
   console.log('click:', key)
 }
+
+const scrollTo = (value: number | VirtualScrollToOptions) => listRef.value?.scrollTo(value)
 </script>
 
 <style lang="less">
diff --git a/packages/cdk/scroll/src/virtual/VirtualScroll.tsx b/packages/cdk/scroll/src/virtual/VirtualScroll.tsx
index 1bbc978fe..43585eb12 100644
--- a/packages/cdk/scroll/src/virtual/VirtualScroll.tsx
+++ b/packages/cdk/scroll/src/virtual/VirtualScroll.tsx
@@ -71,8 +71,8 @@ export default defineComponent({
       }
     })
 
-    const horizontalOverflowed = computed(() => scrollWidth.value > containerSize.value.width)
-    const verticalOverflowed = computed(() => scrollHeight.value > containerSize.value.height)
+    const horizontalOverflowed = computed(() => containerScrollWidth.value > Math.ceil(containerSize.value.width))
+    const verticalOverflowed = computed(() => containerScrollHeight.value > Math.ceil(containerSize.value.height))
 
     const holderRef = ref<HTMLElement>()
     const fillerHorizontalRef = ref<HTMLElement>()
@@ -83,14 +83,14 @@ export default defineComponent({
     const [scroll, changeScroll] = useState<Scroll>({ top: 0, left: 0 })
 
     const {
-      scrollTop: simulatedScrollTop,
-      scrollLeft: simulatedScrollLeft,
-      scrollHeight: simulatedScrollHeight,
-      scrollWidth: simulatedScrollWidth,
-      syncScroll: syncSimulatedScroll,
-      init: initSimulatedScroll,
-      update: updateSimulatedScroll,
-      destroy: destroySimulatedScroll,
+      scrollTop: containerScrollTop,
+      scrollLeft: containerScrollLeft,
+      scrollHeight: containerScrollHeight,
+      scrollWidth: containerScrollWidth,
+      syncScroll: syncContainerScroll,
+      init: initContainerScroll,
+      update: updateContainerScroll,
+      destroy: destroyContainerScroll,
     } = useScroll(holderRef, {
       simulatedScroll: props.scrollMode !== 'native',
       setContainerScroll: false,
@@ -124,7 +124,7 @@ export default defineComponent({
       scrollHeight,
       containerSize,
       changeScroll,
-      syncSimulatedScroll,
+      syncContainerScroll,
     )
 
     const pool = useRenderPool(props, topIndex, bottomIndex, leftIndex, rightIndex, getKey)
@@ -172,7 +172,7 @@ export default defineComponent({
       renderedData: mergedData,
     })
 
-    const scrollTo = useScrollTo(props, holderRef, getKey, getRowHeight, collectSize, syncScroll)
+    const scrollTo = useScrollTo(props, holderRef, getKey, getRowHeight, getColWidth, syncScroll)
     const getHolderElement = () => holderRef.value
     expose({ scrollTo, getHolderElement })
 
@@ -182,13 +182,13 @@ export default defineComponent({
 
     onMounted(() => {
       collectSize()
-      initSimulatedScroll()
+      initContainerScroll()
       watch([scrollWidth, scrollHeight], () => {
-        nextTick(() => updateSimulatedScroll())
+        nextTick(() => updateContainerScroll())
       })
     })
     onUpdated(collectSize)
-    onBeforeUnmount(destroySimulatedScroll)
+    onBeforeUnmount(destroyContainerScroll)
 
     return () => {
       const rowRender = slots.row ?? slots.item ?? props.rowRender ?? props.itemRender
@@ -248,8 +248,8 @@ export default defineComponent({
             <CdkScrollbar
               v-show={verticalOverflowed.value}
               containerSize={containerSize.value.height}
-              scrollRange={simulatedScrollHeight.value}
-              scrollOffset={simulatedScrollTop.value}
+              scrollRange={containerScrollHeight.value}
+              scrollOffset={containerScrollTop.value}
               onScroll={onVerticalScroll}
             />
           )}
@@ -258,8 +258,8 @@ export default defineComponent({
               v-show={horizontalOverflowed.value}
               horizontal
               containerSize={containerSize.value.width}
-              scrollRange={simulatedScrollWidth.value}
-              scrollOffset={simulatedScrollLeft.value}
+              scrollRange={containerScrollWidth.value}
+              scrollOffset={containerScrollLeft.value}
               onScroll={onHorizontalScroll}
             />
           )}
diff --git a/packages/cdk/scroll/src/virtual/composables/useScrollTo.ts b/packages/cdk/scroll/src/virtual/composables/useScrollTo.ts
index b289b3558..c8249a29a 100644
--- a/packages/cdk/scroll/src/virtual/composables/useScrollTo.ts
+++ b/packages/cdk/scroll/src/virtual/composables/useScrollTo.ts
@@ -13,109 +13,302 @@ import type { ComputedRef, Ref } from 'vue'
 
 import { isNil } from 'lodash-es'
 
-import { cancelRAF, rAF } from '@idux/cdk/utils'
+import { Logger, cancelRAF, rAF } from '@idux/cdk/utils'
+
+import { isRowData } from '../utils'
+
+enum TargetAlign {
+  start = -1,
+  end = 1,
+}
 
 export function useScrollTo(
   props: VirtualScrollProps,
   holderRef: Ref<HTMLElement | undefined>,
   getKey: ComputedRef<GetKey>,
   getRowHeight: (rowKey: VKey) => number,
-  collectSize: () => void,
+  getColWidth: (rowKey: VKey, colKey: VKey) => number,
   syncScroll: SyncScroll,
 ): VirtualScrollToFn {
   let refId: number
 
   return (option?: number | VirtualScrollToOptions) => {
-    // When not argument provided, we think dev may want to show the scrollbar
     if (isNil(option)) {
       return
     }
 
     // Normal scroll logic
     cancelRAF(refId)
-    const { dataSource, rowHeight, itemHeight } = props
 
     if (typeof option === 'number') {
       syncScroll({ top: option }, true)
     } else if (typeof option === 'object') {
-      const { align, offset = 0 } = option
-      let index: number
-      if ('index' in option) {
-        index = option.index
-      } else {
-        index = dataSource.findIndex(item => getKey.value(item) === option.key)
+      if ('top' in option || 'left' in option) {
+        syncScroll({ top: option.top, left: option.left }, true)
+        return
+      }
+
+      const {
+        align,
+        verticalAlign: _verticalAlign,
+        horizontalAlign,
+        offset,
+        verticalOffset: _verticalOffset,
+        horizontalOffset = 0,
+      } = option
+      const verticalAlign = _verticalAlign ?? align
+      const verticalOffset = _verticalOffset ?? offset ?? 0
+
+      if (offset) {
+        Logger.warn('cdk/scroll', 'scrollTo option `offset` is deprecated, use verticalOffset instead')
       }
+      if (align) {
+        Logger.warn('cdk/scroll', 'scrollTo option `align` is deprecated, use verticalAlign instead')
+      }
+
+      const { rowIndex, colIndex } = calcScrollIndex(option, props.dataSource, getKey.value)
 
       // We will retry 3 times in case dynamic height shaking
-      const _syncScroll = (times: number, targetAlign?: 'top' | 'bottom') => {
+      const _syncScroll = (
+        times: number,
+        verticalAlign: 'top' | 'bottom' | 'auto' | undefined,
+        horizontalAlign: 'start' | 'end' | 'auto' | undefined,
+      ) => {
         const holderElement = holderRef.value
         if (times < 0 || !holderElement) {
           return
         }
 
         const height = holderElement.clientHeight
-        let needCollectSize = false
-        let newTargetAlign = targetAlign
+        const width = holderElement.clientWidth
+        let targetVerticalAlign: 'top' | 'bottom' | undefined
+        let targetHorizontalAlign: 'start' | 'end' | undefined
 
         // Go to next frame if height not exist
-        if (height > 0) {
-          const mergedAlign = targetAlign || align
+        if (height > 0 && width > 0) {
+          const { itemTop, itemBottom, itemLeft, itemRight } = calcScrollToState(
+            props.dataSource,
+            rowIndex,
+            colIndex,
+            getKey.value,
+            getRowHeight,
+            getColWidth,
+          )
 
-          // Get top & bottom
-          let stackTop = 0
-          let itemTop = 0
-          let itemBottom = 0
+          const { scrollTop, scrollLeft } = holderElement
+          let targetTop
+          let targetLeft
+          ;({ targetVerticalAlign, targetTop } = calcVerticalScrollTarget(
+            verticalAlign,
+            verticalOffset,
+            itemTop,
+            itemBottom,
+            height,
+            scrollTop,
+          ))
+          ;({ targetHorizontalAlign, targetLeft } = calcHorizontalScrollTarget(
+            horizontalAlign,
+            horizontalOffset,
+            itemLeft,
+            itemRight,
+            width,
+            scrollLeft,
+          ))
 
-          for (let i = 0; i <= index; i++) {
-            const itemKey = getKey.value(dataSource[i])
-            itemTop = stackTop
-            const cacheHeight = getRowHeight(itemKey)
-            itemBottom = itemTop + (isNil(cacheHeight) ? rowHeight ?? itemHeight! : cacheHeight)
-
-            stackTop = itemBottom
-
-            if (i === index && isNil(cacheHeight)) {
-              needCollectSize = true
-            }
-          }
-
-          // Scroll to
-          let targetTop: number | null = null
-
-          switch (mergedAlign) {
-            case 'top':
-              targetTop = Math.max(itemTop - offset, 0)
-              break
-            case 'bottom':
-              targetTop = Math.max(itemBottom - height + offset, 0)
-              break
-
-            default: {
-              const { scrollTop } = holderElement
-              const scrollBottom = scrollTop + height
-              if (itemTop < scrollTop) {
-                newTargetAlign = 'top'
-              } else if (itemBottom > scrollBottom) {
-                newTargetAlign = 'bottom'
-              }
-            }
-          }
-
-          if (targetTop !== null && targetTop !== holderElement.scrollTop) {
-            syncScroll({ top: targetTop }, true)
+          if ((!isNil(targetTop) && targetTop !== scrollTop) || (!isNil(targetLeft) && targetLeft !== scrollLeft)) {
+            syncScroll({ top: targetTop, left: targetLeft }, true)
           }
         }
 
         // We will retry since element may not sync height as it described
         refId = rAF(() => {
-          if (needCollectSize) {
-            collectSize()
-          }
-          _syncScroll(times - 1, newTargetAlign)
+          _syncScroll(times - 1, targetVerticalAlign, targetHorizontalAlign)
         })
       }
 
-      _syncScroll(3)
+      _syncScroll(3, verticalAlign, horizontalAlign)
+    }
+  }
+}
+
+function calcScrollIndex(option: VirtualScrollToOptions, dataSource: unknown[], getKey: GetKey) {
+  let rowIndex: number | undefined
+  let colIndex: number | undefined
+
+  if ('rowIndex' in option || 'index' in option) {
+    if ('index' in option) {
+      Logger.warn('cdk/scroll', 'scrollTo option `index` is deprecated, use rowIndex instead')
+    }
+
+    rowIndex = option.rowIndex ?? option.index
+    colIndex = option.colIndex
+  } else if ('rowKey' in option || 'key' in option) {
+    if ('key' in option) {
+      Logger.warn('cdk/scroll', 'scrollTo option `key` is deprecated, use rowKey instead')
+    }
+
+    const rowKey = option.rowKey ?? option.key
+    rowIndex = dataSource.findIndex(item => getKey(item) === rowKey)
+
+    const row = dataSource[rowIndex]
+
+    if (rowIndex > -1 && isRowData(row) && option.colKey) {
+      colIndex = row.data.findIndex(item => getKey(item) === option.colKey)
     }
   }
+
+  return {
+    rowIndex: rowIndex && rowIndex > -1 ? rowIndex : undefined,
+    colIndex: colIndex && colIndex > -1 ? colIndex : undefined,
+  }
+}
+
+function calcScrollToState(
+  dataSource: unknown[],
+  rowIndex: number | undefined,
+  colIndex: number | undefined,
+  getKey: GetKey,
+  getRowHeight: (rowKey: VKey) => number,
+  getColWidth: (rowKey: VKey, colKey: VKey) => number,
+) {
+  let stackTop = 0
+  let stackLeft = 0
+  let itemTop: number | undefined
+  let itemBottom: number | undefined
+  let itemLeft: number | undefined
+  let itemRight: number | undefined
+
+  if (rowIndex) {
+    for (let ri = 0; ri <= rowIndex; ri++) {
+      const row = dataSource[ri]
+      const rowKey = getKey(row)
+      itemTop = stackTop
+      itemBottom = itemTop + getRowHeight(rowKey)
+      stackTop = itemBottom
+
+      if (ri === rowIndex && !isNil(colIndex) && isRowData(row)) {
+        const columns = row.data
+        for (let ci = 0; ci <= colIndex; ci++) {
+          const col = columns[ci]
+          const colKey = getKey(col)
+          itemLeft = stackLeft
+          itemRight = itemLeft + getColWidth(rowKey, colKey)
+          stackLeft = itemRight
+        }
+      }
+    }
+  }
+
+  return {
+    itemTop,
+    itemBottom,
+    itemLeft,
+    itemRight,
+  }
+}
+
+function calcVerticalScrollTarget(
+  align: 'top' | 'bottom' | 'auto' | undefined,
+  offset: number,
+  itemTop: number | undefined,
+  itemBottom: number | undefined,
+  containerHeight: number,
+  containerScrollTop: number,
+): {
+  targetVerticalAlign: 'top' | 'bottom' | undefined
+  targetTop: number | undefined
+} {
+  if (isNil(itemTop) || isNil(itemBottom)) {
+    return {
+      targetVerticalAlign: align === 'auto' ? undefined : align,
+      targetTop: undefined,
+    }
+  }
+
+  const { targetOffset, targetAlign } = _calcScrollTarget(
+    align === 'top' ? TargetAlign.start : align === 'bottom' ? TargetAlign.end : undefined,
+    offset,
+    itemTop,
+    itemBottom,
+    containerHeight,
+    containerScrollTop,
+  )
+
+  return {
+    targetVerticalAlign: targetAlign && (targetAlign === TargetAlign.start ? 'top' : 'bottom'),
+    targetTop: targetOffset,
+  }
+}
+
+function calcHorizontalScrollTarget(
+  align: 'start' | 'end' | 'auto' | undefined,
+  offset: number,
+  itemLeft: number | undefined,
+  itemRight: number | undefined,
+  containerWidth: number,
+  containerScrollLeft: number,
+): {
+  targetHorizontalAlign: 'start' | 'end' | undefined
+  targetLeft: number | undefined
+} {
+  if (isNil(itemLeft) || isNil(itemRight)) {
+    return {
+      targetHorizontalAlign: align === 'auto' ? undefined : align,
+      targetLeft: undefined,
+    }
+  }
+
+  const { targetOffset, targetAlign } = _calcScrollTarget(
+    align === 'start' ? TargetAlign.start : align === 'end' ? TargetAlign.end : undefined,
+    offset,
+    itemLeft,
+    itemRight,
+    containerWidth,
+    containerScrollLeft,
+  )
+
+  return {
+    targetHorizontalAlign: targetAlign && (targetAlign === TargetAlign.start ? 'start' : 'end'),
+    targetLeft: targetOffset,
+  }
+}
+
+function _calcScrollTarget(
+  align: TargetAlign | undefined,
+  offset: number,
+  itemStart: number,
+  itemEnd: number,
+  containerSize: number,
+  containerScrollStart: number,
+) {
+  let targetOffset: number | undefined
+  let targetAlign: TargetAlign | undefined
+
+  if (!align) {
+    const containerScrollEnd = containerScrollStart + containerSize
+    if (itemStart < containerScrollStart) {
+      targetAlign = TargetAlign.start
+    } else if (itemEnd > containerScrollEnd) {
+      targetAlign = TargetAlign.end
+    }
+  } else {
+    targetAlign = align
+  }
+
+  switch (align) {
+    case TargetAlign.start:
+      targetOffset = Math.max(itemStart - offset, 0)
+      break
+    case TargetAlign.end:
+      targetOffset = Math.max(itemEnd - containerSize + offset, 0)
+      break
+
+    default:
+      break
+  }
+
+  return {
+    targetOffset,
+    targetAlign,
+  }
 }
diff --git a/packages/cdk/scroll/src/virtual/types.ts b/packages/cdk/scroll/src/virtual/types.ts
index 188564e7a..d22c922f9 100644
--- a/packages/cdk/scroll/src/virtual/types.ts
+++ b/packages/cdk/scroll/src/virtual/types.ts
@@ -93,9 +93,40 @@ export type VirtualScrollComponent = DefineComponent<
 >
 export type VirtualScrollInstance = InstanceType<DefineComponent<VirtualScrollProps, VirtualScrollBindings>>
 
-export type VirtualScrollToOptions = { align?: 'top' | 'bottom' | 'auto'; offset?: number } & (
-  | { key: VKey }
-  | { index: number }
+export type VirtualScrollToOptions = {
+  /**
+   * @deprecated use verticalAlign instead
+   */
+  align?: 'top' | 'bottom' | 'auto'
+  verticalAlign?: 'top' | 'bottom' | 'auto'
+  horizontalAlign?: 'start' | 'end' | 'auto'
+  /**
+   * @deprecated use verticalOffset instead
+   */
+  offset?: number
+  verticalOffset?: number
+  horizontalOffset?: number
+} & (
+  | {
+      /**
+       * @deprecated use rowKey instead
+       */
+      key?: VKey
+      rowKey: VKey
+      colKey?: VKey
+    }
+  | {
+      /**
+       * @deprecated use rowIndex instead
+       */
+      index?: number
+      rowIndex: number
+      colIndex?: number
+    }
+  | {
+      top?: number
+      left?: number
+    }
 )
 export type VirtualScrollToFn = (option?: number | VirtualScrollToOptions) => void
 export type VirtualRowRenderFn<Row = any> = (option: { item: Row; index: number; children?: VNode[] }) => VNodeChild
diff --git a/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap b/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
index c9f169164..d4ec3b58f 100644
--- a/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
+++ b/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
@@ -373,7 +373,7 @@ exports[`Tree > getKey work 2`] = `
 exports[`Tree > height and virtual work 1`] = `
 "<div class=\\"ix-tree ix-tree-active ix-tree-virtual\\" role=\\"tree\\">
   <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
-  <div class=\\"cdk-virtual-scroll cdk-virtual-scroll-overflowed-vertical ix-tree-content\\">
+  <div class=\\"cdk-virtual-scroll ix-tree-content\\">
     <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 100px; width: 100%; overflow-x: auto; overflow-y: auto;\\">
       <div class=\\"cdk-virtual-scroll-filler-horizontal\\"></div>
       <div class=\\"cdk-virtual-scroll-filler-vertical\\" style=\\"height: 308px; width: 0px;\\"></div>