diff --git a/packages/docs-ui/src/controllers/back-scroll.controller.ts b/packages/docs-ui/src/controllers/back-scroll.controller.ts
index 19e885d624..03a70f5d95 100644
--- a/packages/docs-ui/src/controllers/back-scroll.controller.ts
+++ b/packages/docs-ui/src/controllers/back-scroll.controller.ts
@@ -112,7 +112,7 @@ export class BackScrollController extends RxDisposable {
             offsetX = left - boundRight + ANCHOR_WIDTH;
         }
 
-        const config = viewportMain.transViewportScroll2ScrollValue(offsetX, offsetY);
+        const config = viewportMain.getBarScroll(offsetX, offsetY);
         viewportMain.scrollBy(config);
     }
 
diff --git a/packages/docs-ui/src/controllers/doc-editor-bridge.controller.ts b/packages/docs-ui/src/controllers/doc-editor-bridge.controller.ts
index 40b9bb9091..d2d32e9176 100644
--- a/packages/docs-ui/src/controllers/doc-editor-bridge.controller.ts
+++ b/packages/docs-ui/src/controllers/doc-editor-bridge.controller.ts
@@ -120,7 +120,7 @@ export class DocEditorBridgeController extends Disposable {
                 if (scrollBar == null) {
                     viewportMain && new ScrollBar(viewportMain, { enableHorizontal: false, barSize: 8 });
                 } else {
-                    viewportMain?.resetCanvasSizeAndUpdateScrollBar();
+                    viewportMain?.resetSizeAndScrollBar();
                 }
             } else {
                 scrollBar = null;
@@ -132,7 +132,7 @@ export class DocEditorBridgeController extends Disposable {
                 if (scrollBar == null) {
                     viewportMain && new ScrollBar(viewportMain, { barSize: 8, enableVertical: false });
                 } else {
-                    viewportMain?.resetCanvasSizeAndUpdateScrollBar();
+                    viewportMain?.resetSizeAndScrollBar();
                 }
             } else {
                 scrollBar = null;
diff --git a/packages/docs-ui/src/controllers/zoom.controller.ts b/packages/docs-ui/src/controllers/zoom.controller.ts
index 88373a2fb0..30d07efac6 100644
--- a/packages/docs-ui/src/controllers/zoom.controller.ts
+++ b/packages/docs-ui/src/controllers/zoom.controller.ts
@@ -240,7 +240,7 @@ export class ZoomController extends Disposable {
 
         const viewport = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
         if (scrollToX !== Number.POSITIVE_INFINITY && viewport != null) {
-            const actualX = viewport.transViewportScroll2ScrollValue(scrollToX, 0).x;
+            const actualX = viewport.getBarScroll(scrollToX, 0).x;
             viewport.scrollTo({
                 x: actualX,
             });
diff --git a/packages/engine-render/src/basics/scroll-xy.ts b/packages/engine-render/src/basics/scroll-xy.ts
index 98e6cc1fe7..84cada083f 100644
--- a/packages/engine-render/src/basics/scroll-xy.ts
+++ b/packages/engine-render/src/basics/scroll-xy.ts
@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import type { Viewport } from '../viewport';
-
 export function getCurrentScrollXY(scrollTimer: any) {
     const scene = scrollTimer.getScene();
-    const viewport = scrollTimer.getViewportByCoord(scene) as Viewport;
+    const viewport = scrollTimer.getViewportByCoord(scene);
     const scrollX = 0;
     const scrollY = 0;
     if (!viewport) {
@@ -27,7 +25,7 @@ export function getCurrentScrollXY(scrollTimer: any) {
             scrollY,
         };
     }
-    const actualScroll = viewport.transScroll2ViewportScrollValue(viewport.scrollX, viewport.scrollY);
+    const actualScroll = viewport.getActualScroll(viewport.scrollX, viewport.scrollY);
     return {
         scrollX: actualScroll.x,
         scrollY: actualScroll.y,
diff --git a/packages/engine-render/src/components/sheets/interfaces.ts b/packages/engine-render/src/components/sheets/interfaces.ts
index 65edfbace9..6ecff42d72 100644
--- a/packages/engine-render/src/components/sheets/interfaces.ts
+++ b/packages/engine-render/src/components/sheets/interfaces.ts
@@ -75,16 +75,16 @@ export enum ShowGridlinesState {
 }
 
 export enum SHEET_VIEWPORT_KEY {
-    VIEW_MAIN = 'sheetViewMain',
-    VIEW_MAIN_LEFT_TOP = 'sheetViewMainLeftTop',
-    VIEW_MAIN_TOP = 'sheetViewMainTop',
-    VIEW_MAIN_LEFT = 'sheetViewMainLeft',
-
-    VIEW_ROW_TOP = 'sheetViewRowTop',
-    VIEW_ROW_BOTTOM = 'sheetViewRowBottom',
-    VIEW_COLUMN_LEFT = 'sheetViewColumnLeft',
-    VIEW_COLUMN_RIGHT = 'sheetViewColumnRight',
-    VIEW_LEFT_TOP = 'sheetViewLeftTop',
+    VIEW_MAIN = 'viewMain',
+    VIEW_MAIN_LEFT_TOP = 'viewMainLeftTop',
+    VIEW_MAIN_TOP = 'viewMainTop',
+    VIEW_MAIN_LEFT = 'viewMainLeft',
+
+    VIEW_ROW_TOP = 'viewRowTop',
+    VIEW_ROW_BOTTOM = 'viewRowBottom',
+    VIEW_COLUMN_LEFT = 'viewColumnLeft',
+    VIEW_COLUMN_RIGHT = 'viewColumnRight',
+    VIEW_LEFT_TOP = 'viewLeftTop',
 }
 
 export interface IPaintForRefresh {
diff --git a/packages/engine-render/src/components/sheets/spreadsheet.ts b/packages/engine-render/src/components/sheets/spreadsheet.ts
index 4f75e44cab..1a6ff47c02 100644
--- a/packages/engine-render/src/components/sheets/spreadsheet.ts
+++ b/packages/engine-render/src/components/sheets/spreadsheet.ts
@@ -705,6 +705,10 @@ export class Spreadsheet extends SheetComponent {
         const spreadsheetSkeleton = this.getSkeleton()!;
         const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton;
         const { left, top, right, bottom } = cacheBound;
+        // left -= rowHeaderWidth;
+        // top -= columnHeaderHeight;
+        // right -= rowHeaderWidth;
+        // bottom -= columnHeaderHeight;
         const findClosestHundred = (number: number) => {
             const remainder = number % 100;
             return number + (100 - remainder);
diff --git a/packages/engine-render/src/scene.ts b/packages/engine-render/src/scene.ts
index 28b0f8e4cc..777d45efd1 100644
--- a/packages/engine-render/src/scene.ts
+++ b/packages/engine-render/src/scene.ts
@@ -958,7 +958,7 @@ export class Scene extends ThinScene {
 
         this.transform = composeResult;
         this.getViewports().forEach((vp: Viewport) => {
-            vp.resetCanvasSizeAndUpdateScrollBar();
+            vp.resetSizeAndScrollBar();
         });
         this.makeDirty(true);
     }
diff --git a/packages/engine-render/src/scroll-timer.ts b/packages/engine-render/src/scroll-timer.ts
index b645454e7a..80b2f84e61 100644
--- a/packages/engine-render/src/scroll-timer.ts
+++ b/packages/engine-render/src/scroll-timer.ts
@@ -143,7 +143,7 @@ export class ScrollTimer {
             y,
         });
 
-        const actualScroll = viewport?.transScroll2ViewportScrollValue(x, y);
+        const actualScroll = viewport?.getActualScroll(x, y);
 
         this._scrollX = actualScroll?.x || 0;
         this._scrollY = actualScroll?.y || 0;
diff --git a/packages/engine-render/src/viewport.ts b/packages/engine-render/src/viewport.ts
index 4db76d6459..18c315b0e1 100644
--- a/packages/engine-render/src/viewport.ts
+++ b/packages/engine-render/src/viewport.ts
@@ -68,8 +68,8 @@ export interface IScrollObserverParam {
     /**
      * scrollX for viewport
      */
-    viewportScrollX?: number;
-    viewportScrollY?: number;
+    actualScrollX?: number;
+    actualScrollY?: number;
     limitX?: number;
     limitY?: number;
     isTrigger?: boolean;
@@ -94,19 +94,19 @@ export class Viewport {
      */
     scrollX: number = 0;
     scrollY: number = 0;
-    private _preScrollX: number = 0;
-    private _preScrollY: number = 0;
+    _preScrollX: number = 0;
+    _preScrollY: number = 0;
 
     /**
-     * The viewport scroll offset equals the distance from the content area position to the top, and there is a conversion relationship with scrollX and scrollY
-     * use transScroll2ViewportScrollValue to get scrolling value for spreadsheet.
+     * The actual scroll offset equals the distance from the content area position to the top, and there is a conversion relationship with scrollX and scrollY
+     * use getActualScroll to get scrolling value for spreadsheet.
      */
-    private _viewportScrollX: number = 0;
-    private _viewportScrollY: number = 0;
-    private _preViewportScrollX: number = 0;
-    private _preViewportScrollY: number = 0;
-    private _deltaViewportScrollX: number = 0;
-    private _deltaViewportScrollY: number = 0;
+    viewportScrollX: number = 0;
+    viewportScrollY: number = 0;
+    preViewportScrollX: number = 0;
+    preViewportScrollY: number = 0;
+    _deltaViewportScrollX: number = 0;
+    _deltaViewportScrollY: number = 0;
 
     onMouseWheelObserver = new Observable<IWheelEvent>();
 
@@ -239,13 +239,13 @@ export class Viewport {
             this._isRelativeY = props.isRelativeY;
         }
 
-        this._setViewportWidthAndHeight(props);
+        this._setWithAndHeight(props);
         this.initCacheCanvas(props);
 
         this._isWheelPreventDefaultX = props?.isWheelPreventDefaultX || false;
         this._isWheelPreventDefaultY = props?.isWheelPreventDefaultY || false;
 
-        this.resetCanvasSizeAndUpdateScrollBar();
+        this._resizeCacheCanvas();
         this.getBounding();
 
         this.scene.getEngine()?.onTransformChangeObservable.add(() => {
@@ -374,22 +374,6 @@ export class Viewport {
         return this._active;
     }
 
-    set viewportScrollX(val: number) {
-        this._viewportScrollX = val;
-    }
-
-    get viewportScrollX() {
-        return this._viewportScrollX;
-    }
-
-    set viewportScrollY(val: number) {
-        this._viewportScrollY = val;
-    }
-
-    get viewportScrollY() {
-        return this._viewportScrollY;
-    }
-
     private set top(num: number) {
         this._topOrigin = num;
         this._top = toPx(num, this._scene?.getParent()?.height);
@@ -440,16 +424,15 @@ export class Viewport {
     }
 
     /**
-     * call when canvas element size change
+     * 物理 canvas 大小改变时调用(调整 window 大小时触发)
      */
-    resetCanvasSizeAndUpdateScrollBar() {
+    resetSizeAndScrollBar() {
         this._resizeCacheCanvas();
-        this._updateScrollBarPosByViewportScroll();
     }
 
     setScrollBar(instance: BaseScrollBar) {
         this._scrollBar = instance;
-        this._updateScrollBarPosByViewportScroll();
+        this._resizeCacheCanvas();
     }
 
     removeScrollBar() {
@@ -457,7 +440,7 @@ export class Viewport {
     }
 
     /**
-     * 和 resetCanvasSizeAndScrollbar 不同
+     * 和 resetSizeAndScrollBar 不同
      * 此方法是调整冻结行列设置时 & 初始化时触发, resize window 时并不会触发
      *
      * 注意参数 position 不一定有 height & width  对于 viewMain 只有 left top bottom right
@@ -477,8 +460,8 @@ export class Viewport {
         //         (this as IKeyValue)[pKey] = position[pKey as keyof IViewPosition];
         //     }
         // });
-        this._setViewportWidthAndHeight(position);
-        this.resetCanvasSizeAndUpdateScrollBar();
+        this._setWithAndHeight(position);
+        this._resizeCacheCanvas();
     }
 
     setPadding(param: IPosition) {
@@ -488,7 +471,7 @@ export class Viewport {
         this._paddingStartY = startY;
         this._paddingEndY = endY;
 
-        this.resetCanvasSizeAndUpdateScrollBar();
+        this._resizeCacheCanvas();
     }
 
     resetPadding() {
@@ -501,40 +484,32 @@ export class Viewport {
     }
 
     /**
-     * set scrollXY and viewportScrollXY, and update scrollInfo without notify listeners of scrollInfo$
-     * mainly call by scroll.render-controller and viewport.resize ...
-     * only viewMain would call scrollTo, other views did not call scroll, see scroll.render-controller
-     * @param pos
-     *
-     * when scrolling:
      *
-     * scroll.render-controller@_scrollManagerService.scrollInfo$.subscribe --> scrollTo
+     * 改动 scrollbar 的位置，不是 viewport content 滚动
+     * scroll to position, absolute
+     * 只有 viewMain 才会被调用 scrollTo 其他 viewport 都不会调用此方法
+     * 具体在 scroll.controller 中
      *
-     * when change skelenton:
-     * _currentSkeletonBefore$ ---> scroll.render-controller@_updateSceneSize --> setSearchParam --> scene@_setTransForm ---> viewport.resetCanvasSizeAndUpdateScrollBar ---> scrollTo ---> _scroll
-     * --> onScrollAfterObserver.notifyObservers --> scroll.render-controller@onScrollAfterObserver ---> setScrollInfoToCurrSheetWithoutNotify  ---> sms._setScrollInfo
-     *
-     * _currentSkeleton$ ---> selection.render-controller ---> formula@_autoScroll ---> viewport.resize ---> get scrollXY by viewportScrollXY ---> scrollTo
-     * _currentSkeleton$ ---> selection.render-controller ---> setCurrentSelection ---> formula@_autoScroll ---> scrollTo
-     * _currentSkeleton$ ---> freeze.render-controller@_refreshFreeze --> viewport.resize ---> scrollTo  ---> _scroll
      * Debug
      * window.scene.getViewports()[0].scrollTo({x: 14.2, y: 1.8}, true)
+     * @param pos
+     * @returns
      */
-    scrollTo(pos: IScrollBarPosition) {
-        return this._scrollToScrollbarPos(SCROLL_TYPE.scrollTo, pos);
+    scrollTo(pos: IScrollBarPosition, isTrigger = true) {
+        return this._scroll(SCROLL_TYPE.scrollTo, pos, isTrigger);
     }
 
     /**
      * current position plus offset, relative
      * @param pos
-     * @returns isLimited
+     * @returns
      */
     scrollBy(pos: IScrollBarPosition, isTrigger = true) {
-        return this._scrollToScrollbarPos(SCROLL_TYPE.scrollBy, pos, isTrigger);
+        return this._scroll(SCROLL_TYPE.scrollBy, pos, isTrigger);
     }
 
     scrollByBar(pos: IScrollBarPosition, isTrigger = true) {
-        this._scrollToScrollbarPos(SCROLL_TYPE.scrollBy, pos, isTrigger);
+        this._scroll(SCROLL_TYPE.scrollBy, pos, isTrigger);
         const { x, y } = pos;
         this.onScrollByBarObserver.notifyObservers({
             viewport: this,
@@ -542,8 +517,8 @@ export class Viewport {
             scrollY: this.scrollY,
             x,
             y,
-            viewportScrollX: this.viewportScrollX,
-            viewportScrollY: this.viewportScrollY,
+            actualScrollX: this.viewportScrollX,
+            actualScrollY: this.viewportScrollY,
             limitX: this._scrollBar?.limitX,
             limitY: this._scrollBar?.limitY,
             isTrigger,
@@ -564,13 +539,13 @@ export class Viewport {
         }
         const x = offsetX + this._paddingStartX;
         const y = offsetY + this._paddingStartY;
-        const param = this.transViewportScroll2ScrollValue(x, y);
+        const param = this.getBarScroll(x, y);
         return this.scrollBy(param, isTrigger);
     }
 
-    transViewportScroll2ScrollValue(viewportScrollX: number, viewportScrollY: number) {
-        let x = viewportScrollX - this._paddingStartX;
-        let y = viewportScrollY - this._paddingStartY;
+    getBarScroll(actualX: number, actualY: number) {
+        let x = actualX - this._paddingStartX;
+        let y = actualY - this._paddingStartY;
 
         if (this._scrollBar) {
             x *= this._scrollBar.ratioScrollX; // convert to scroll coord
@@ -594,7 +569,7 @@ export class Viewport {
         };
     }
 
-    transScroll2ViewportScrollValue(scrollX: number, scrollY: number) {
+    getActualScroll(scrollX: number, scrollY: number) {
         let x = scrollX;
         let y = scrollY;
         if (this._scrollBar) {
@@ -647,25 +622,25 @@ export class Viewport {
      * get actual scroll value by scrollXY
      * @returns
      */
-    getViewportScrollByScroll() {
+    getTransformedScroll() {
         const x = this.scrollX;
         const y = this.scrollY;
 
-        return this.transScroll2ViewportScrollValue(x, y);
+        return this.getActualScroll(x, y);
     }
 
     getScrollBar() {
         return this._scrollBar;
     }
 
-    // scrollTo ---> _scroll ---> onScrollAfterObserver.notifyObservers ---> scroll.render-controller@updateScroll
-    updateScroll(current: IScrollObserverParam) {
+    // _scrollTo ---> _scroll ---> onScrollAfterObserver.notifyObservers ---> updateScroll
+    updateScroll(param: IScrollObserverParam) {
         // scrollvalue for scrollbar, when rows over 5000(big sheet), deltaScrollY always 0 when scrolling. Do not use this value to judge scrolling
         // this._deltaScrollX = this.scrollX - this._preScrollX;
         // this._deltaScrollY = this.scrollY - this._preScrollY;
         this._preScrollX = this.scrollX;
         this._preScrollY = this.scrollY;
-        const { scrollX, scrollY, viewportScrollX, viewportScrollY } = current;
+        const { scrollX, scrollY, actualScrollX, actualScrollY } = param;
         if (scrollX !== undefined) {
             this.scrollX = scrollX;
         }
@@ -674,16 +649,16 @@ export class Viewport {
             this.scrollY = scrollY;
         }
 
-        if (viewportScrollX !== undefined) {
-            this._preViewportScrollX = this.viewportScrollX;
-            this.viewportScrollX = viewportScrollX;
-            this._deltaViewportScrollX = viewportScrollX - this._preViewportScrollX;
+        if (actualScrollX !== undefined) {
+            this.preViewportScrollX = this.viewportScrollX;
+            this.viewportScrollX = actualScrollX;
+            this._deltaViewportScrollX = actualScrollX - this.preViewportScrollX;
         }
 
-        if (viewportScrollY !== undefined) {
-            this._preViewportScrollY = this.viewportScrollY;
-            this.viewportScrollY = viewportScrollY;
-            this._deltaViewportScrollY = viewportScrollY - this._preViewportScrollY;
+        if (actualScrollY !== undefined) {
+            this.preViewportScrollY = this.viewportScrollY;
+            this.viewportScrollY = actualScrollY;
+            this._deltaViewportScrollY = actualScrollY - this.preViewportScrollY;
         }
         return this;
     }
@@ -765,7 +740,7 @@ export class Viewport {
             mainCtx.restore();
         }
 
-        // this._scrollRendered();
+        this._scrollRendered();
     }
 
     private _makeDefaultViewport() {
@@ -926,7 +901,7 @@ export class Viewport {
 
     getRelativeVector(coord: Vector2) {
         const sceneTrans = this.scene.transform.clone().invert();
-        const scroll = this.getViewportScrollByScroll();
+        const scroll = this.getTransformedScroll();
 
         const svCoord = sceneTrans.applyPoint(coord).add(Vector2.FromArray([scroll.x, scroll.y]));
         return svCoord;
@@ -934,7 +909,7 @@ export class Viewport {
 
     getAbsoluteVector(coord: Vector2) {
         const sceneTrans = this.scene.transform.clone();
-        const scroll = this.getViewportScrollByScroll();
+        const scroll = this.getTransformedScroll();
 
         const svCoord = sceneTrans.applyPoint(coord.subtract(Vector2.FromArray([scroll.x, scroll.y])));
         return svCoord;
@@ -1139,10 +1114,9 @@ export class Viewport {
         return this._isForceDirty;
     }
 
-    /**
-     * resize canvas & use viewportScrollXY to scrollTo
-     */
     private _resizeCacheCanvas() {
+        const actualScrollX = this.viewportScrollX;
+        const actualScrollY = this.viewportScrollY;
         const { width, height } = this._getViewPortSize();
 
         const scaleX = this.scene.scaleX;
@@ -1153,19 +1127,12 @@ export class Viewport {
         this.cacheBound = this._viewBound;
         this.preCacheBound = null;
 
-        this.markForceDirty(true);
-    }
-
-    private _updateScrollBarPosByViewportScroll() {
-        const viewportScrollX = this.viewportScrollX;
-        const viewportScrollY = this.viewportScrollY;
-        const { width, height } = this._getViewPortSize();
         const contentWidth = (this._scene.width - this._paddingEndX) * this._scene.scaleX;
         const contentHeight = (this._scene.height - this._paddingEndY) * this._scene.scaleY;
 
         if (this._scrollBar) {
             this._scrollBar.resize(width, height, contentWidth, contentHeight);
-            const { x, y } = this.transViewportScroll2ScrollValue(viewportScrollX, viewportScrollY);
+            const { x, y } = this.getBarScroll(actualScrollX, actualScrollY);
             this.scrollTo({
                 x,
                 y,
@@ -1231,9 +1198,6 @@ export class Viewport {
         };
     }
 
-    /**
-     * update pre value has handle in updateScroll()
-     */
     private _scrollRendered() {
         this._preScrollX = this.scrollX;
         this._preScrollY = this.scrollY;
@@ -1245,7 +1209,8 @@ export class Viewport {
             y: number;
         },
         x?: number,
-        y?: number
+        y?: number,
+        isTrigger = true
     ) {
         clearTimeout(this._scrollStopNum);
         this._scrollStopNum = setTimeout(() => {
@@ -1255,10 +1220,11 @@ export class Viewport {
                 scrollY: this.scrollY,
                 x,
                 y,
-                viewportScrollX: scroll.x,
-                viewportScrollY: scroll.y,
+                actualScrollX: scroll.x,
+                actualScrollY: scroll.y,
                 limitX: this._scrollBar?.limitX,
                 limitY: this._scrollBar?.limitY,
+                isTrigger,
             });
         }, 2);
     }
@@ -1267,14 +1233,13 @@ export class Viewport {
      * Scroll Viewport
      * Only the 'viewMain' will enter this function, other viewports will not.
      *
-     * caller: scroll.render-controller viewportMain.scrollTo({x, y}))
-     * this._scrollManagerService.scrollInfo$.subscribe --> scrollTo --> _scroll
+     * caller: scroll.controller viewportMain.proscrollTo(config)
      * @param scrollType
-     * @param scrollBarPos viewMain 滚动条的位置
+     * @param pos viewMain 滚动条的位置
      * @param isTrigger
      */
-    private _scrollToScrollbarPos(scrollType: SCROLL_TYPE, scrollBarPos: IScrollBarPosition, isTrigger: boolean = true) {
-        const { x, y } = scrollBarPos;
+    private _scroll(scrollType: SCROLL_TYPE, pos: IScrollBarPosition, isTrigger = true) {
+        const { x, y } = pos;
         if (this._scrollBar == null) {
             return;
         }
@@ -1319,27 +1284,24 @@ export class Viewport {
             this._scrollBar.makeDirty(true);
         }
 
-        const vpScroll = this.getViewportScrollByScroll();
-        this.viewportScrollX = vpScroll.x;
-        this.viewportScrollY = vpScroll.y;
+        const scroll = this.getTransformedScroll();
+        this.viewportScrollX = scroll.x;
+        this.viewportScrollY = scroll.y;
 
-        // scroll.render-controller@onScrollAfterObserver ---> setScrollInfo but no notify
-        // calc startRow & offset by viewportScrollXY, then update scrollInfo
-        // other viewports, rowHeader & colHeader depend on this notify
         this.onScrollAfterObserver.notifyObservers({
             viewport: this,
             scrollX: this.scrollX,
             scrollY: this.scrollY,
             x,
             y,
-            viewportScrollX: vpScroll.x,
-            viewportScrollY: vpScroll.y,
+            actualScrollX: scroll.x,
+            actualScrollY: scroll.y,
             limitX: this._scrollBar?.limitX,
             limitY: this._scrollBar?.limitY,
             isTrigger,
         });
 
-        this._triggerScrollStop(vpScroll, x, y);
+        this._triggerScrollStop(scroll, x, y, isTrigger);
 
         return limited;
     }
@@ -1385,6 +1347,7 @@ export class Viewport {
             : 0b00;
 
         const shouldCacheUpdate = nearEdge | viewBoundOutCacheArea;
+        // console.log(`shouldCacheUpdate${shouldCacheUpdate}`, `${this.viewportKey}:`, this.preCacheBound, this.cacheBound, this.viewBound, this._preCacheVisibleBound);
         return shouldCacheUpdate;
     }
 
@@ -1485,7 +1448,7 @@ export class Viewport {
         }
     }
 
-    private _setViewportWidthAndHeight(props?: IViewProps) {
+    private _setWithAndHeight(props?: IViewProps) {
         if (props?.top != null) {
             this.top = props.top;
         }
diff --git a/packages/sheets-ui/src/commands/commands/__tests__/create-command-test-bed.ts b/packages/sheets-ui/src/commands/commands/__tests__/create-command-test-bed.ts
index 73ffd234aa..68838621b9 100644
--- a/packages/sheets-ui/src/commands/commands/__tests__/create-command-test-bed.ts
+++ b/packages/sheets-ui/src/commands/commands/__tests__/create-command-test-bed.ts
@@ -23,7 +23,6 @@ import {
     LocaleType,
     LogLevel,
     Plugin,
-    Tools,
     Univer,
     UniverInstanceType,
 } from '@univerjs/core';
@@ -113,7 +112,7 @@ export function createCommandTestBed(workbookData?: IWorkbookData, dependencies?
     }
 
     univer.registerPlugin(TestPlugin);
-    const sheet = univer.createUniverSheet(Tools.deepClone(workbookData || getTestWorkbookDataDemo()));
+    const sheet = univer.createUniverSheet(workbookData || getTestWorkbookDataDemo());
 
     const univerInstanceService = injector.get(IUniverInstanceService);
     univerInstanceService.focusUnit('test');
diff --git a/packages/sheets-ui/src/commands/commands/__tests__/create-selection-command-test-bed.ts b/packages/sheets-ui/src/commands/commands/__tests__/create-selection-command-test-bed.ts
index afb19dc78f..c4a0f18db5 100644
--- a/packages/sheets-ui/src/commands/commands/__tests__/create-selection-command-test-bed.ts
+++ b/packages/sheets-ui/src/commands/commands/__tests__/create-selection-command-test-bed.ts
@@ -18,9 +18,9 @@ import type { IWorkbookData } from '@univerjs/core';
 import { ICommandService, LocaleType } from '@univerjs/core';
 import { SetFrozenMutation, SetSelectionsOperation } from '@univerjs/sheets';
 // FIXME: should not import from the inside of the package
+import { createCommandTestBed } from '@univerjs/sheets/commands/commands/__tests__/create-command-test-bed.js';
 
 import { ScrollManagerService } from '../../../services/scroll-manager.service';
-import { SheetSkeletonManagerService } from '../../../services/sheet-skeleton-manager.service';
 import { ShortcutExperienceService } from '../../../services/shortcut-experience.service';
 import {
     CancelFrozenCommand,
@@ -29,7 +29,6 @@ import {
     SetSelectionFrozenCommand,
 } from '../set-frozen.command';
 import { ExpandSelectionCommand, MoveSelectionCommand, SelectAllCommand } from '../set-selection.command';
-import { createCommandTestBed } from './create-command-test-bed';
 
 export function createSelectionCommandTestBed(workbookData?: IWorkbookData) {
     const { univer, get, sheet } = createCommandTestBed(workbookData || SIMPLE_SELECTION_WORKBOOK_DATA, [
@@ -52,7 +51,6 @@ export function createFrozenCommandTestBed(workbookData?: IWorkbookData) {
     const { univer, get, sheet } = createCommandTestBed(workbookData || SIMPLE_SELECTION_WORKBOOK_DATA, [
         [ShortcutExperienceService],
         [ScrollManagerService],
-        [SheetSkeletonManagerService],
     ]);
 
     const commandService = get(ICommandService);
diff --git a/packages/sheets-ui/src/commands/commands/__tests__/set-frozen.command.spec.ts b/packages/sheets-ui/src/commands/commands/__tests__/set-frozen.command.spec.ts
index a6998c1f81..8848f9d8fe 100644
--- a/packages/sheets-ui/src/commands/commands/__tests__/set-frozen.command.spec.ts
+++ b/packages/sheets-ui/src/commands/commands/__tests__/set-frozen.command.spec.ts
@@ -75,13 +75,11 @@ describe('Test commands used for change selections', () => {
     }
 
     const scrollTo = (startRow: number, startColumn: number, offsetX = 0, offsetY = 0) => {
-        scrollManagerService.setScrollInfoToCurrSheet({
+        scrollManagerService.addOrReplaceByParam({
             sheetViewStartRow: startRow,
             sheetViewStartColumn: startColumn,
             offsetX,
             offsetY,
-            scrollLeft: 0,
-            scrollTop: 0,
             ...currentInfo,
         });
     };
@@ -110,7 +108,7 @@ describe('Test commands used for change selections', () => {
             ...currentInfo,
         });
         scrollManagerService = get(ScrollManagerService);
-        scrollManagerService.setSearchParamAndRefresh({
+        scrollManagerService.setCurrentScroll({
             ...currentInfo,
         });
     }
diff --git a/packages/sheets-ui/src/commands/commands/set-frozen.command.ts b/packages/sheets-ui/src/commands/commands/set-frozen.command.ts
index 7023a78f48..0dff6db414 100644
--- a/packages/sheets-ui/src/commands/commands/set-frozen.command.ts
+++ b/packages/sheets-ui/src/commands/commands/set-frozen.command.ts
@@ -51,7 +51,7 @@ export const SetSelectionFrozenCommand: ICommand<ISetSelectionFrozenCommandParam
         const currentSelection = selections[selections?.length - 1];
         const { range } = currentSelection;
         const scrollManagerService = accessor.get(ScrollManagerService);
-        const { sheetViewStartRow = 0, sheetViewStartColumn = 0 } = scrollManagerService.getCurrentScrollInfo() || {};
+        const { sheetViewStartRow = 0, sheetViewStartColumn = 0 } = scrollManagerService.getCurrentScroll() || {};
         let startRow;
         let startColumn;
         let ySplit;
diff --git a/packages/sheets-ui/src/commands/commands/set-scroll.command.ts b/packages/sheets-ui/src/commands/commands/set-scroll.command.ts
index 457cbf7cb0..687ca9effa 100644
--- a/packages/sheets-ui/src/commands/commands/set-scroll.command.ts
+++ b/packages/sheets-ui/src/commands/commands/set-scroll.command.ts
@@ -30,12 +30,10 @@ export interface ISetScrollRelativeCommandParams {
 
 /**
  * This command is used to manage the scroll by relative offset
- * Usually triggered by wheel event.
  */
 export const SetScrollRelativeCommand: ICommand<ISetScrollRelativeCommandParams> = {
     id: 'sheet.command.set-scroll-relative',
     type: CommandType.COMMAND,
-    // offsetXY derived from mouse wheel event
     handler: async (accessor, params = { offsetX: 0, offsetY: 0 }) => {
         const commandService = accessor.get(ICommandService);
         const scrollManagerService = accessor.get(ScrollManagerService);
@@ -46,7 +44,7 @@ export const SetScrollRelativeCommand: ICommand<ISetScrollRelativeCommandParams>
 
         const { unitId, subUnitId, worksheet } = target;
         const { xSplit, ySplit } = worksheet.getConfig().freeze;
-        const currentScroll = scrollManagerService.getCurrentScrollInfo();
+        const currentScroll = scrollManagerService.getCurrentScroll();
         const { offsetX = 0, offsetY = 0 } = params || {};
         const {
             sheetViewStartRow = 0,
@@ -60,7 +58,7 @@ export const SetScrollRelativeCommand: ICommand<ISetScrollRelativeCommandParams>
             sheetId: subUnitId,
             sheetViewStartRow: sheetViewStartRow + ySplit,
             sheetViewStartColumn: sheetViewStartColumn + xSplit,
-            offsetX: currentOffsetX + offsetX, // currentOffsetX, offsetX 0, -179, offsetX may be negative or over max
+            offsetX: currentOffsetX + offsetX,
             offsetY: currentOffsetY + offsetY,
         });
     },
@@ -75,7 +73,6 @@ export interface IScrollCommandParams {
 
 /**
  * This command is used to manage the scroll position of the current view by specifying the cell index of the top left cell
- * Usually triggered by click scrollbar.
  */
 export const ScrollCommand: ICommand<IScrollCommandParams> = {
     id: 'sheet.command.scroll-view',
@@ -92,7 +89,7 @@ export const ScrollCommand: ICommand<IScrollCommandParams> = {
         if (!target) return false;
 
         const { workbook, worksheet } = target;
-        const currentScroll = scrollManagerService.getCurrentScrollInfo();
+        const currentScroll = scrollManagerService.getCurrentScroll();
 
         if (!worksheet) {
             return false;
@@ -104,8 +101,6 @@ export const ScrollCommand: ICommand<IScrollCommandParams> = {
             sheetViewStartRow: currentRow,
             offsetX: currentOffsetX,
             offsetY: currentOffsetY,
-            scrollLeft,
-            scrollTop,
         } = currentScroll || {};
 
         const { xSplit, ySplit } = worksheet.getConfig().freeze;
@@ -118,8 +113,6 @@ export const ScrollCommand: ICommand<IScrollCommandParams> = {
             sheetViewStartColumn: sheetViewStartColumn ?? (currentColumn ?? 0) + xSplit,
             offsetX: offsetX ?? currentOffsetX,
             offsetY: offsetY ?? currentOffsetY,
-            scrollLeft,
-            scrollTop,
         });
     },
 };
@@ -162,8 +155,6 @@ export const ResetScrollCommand: ICommand = {
             sheetId: subUnitId,
             sheetViewStartRow: 0,
             sheetViewStartColumn: 0,
-            scrollLeft: 0,
-            scrollTop: 0,
         });
     },
 };
diff --git a/packages/sheets-ui/src/commands/operations/scroll.operation.ts b/packages/sheets-ui/src/commands/operations/scroll.operation.ts
index 2e1c7e2adb..46bd1db2e1 100644
--- a/packages/sheets-ui/src/commands/operations/scroll.operation.ts
+++ b/packages/sheets-ui/src/commands/operations/scroll.operation.ts
@@ -22,9 +22,10 @@ import { ScrollManagerService } from '../../services/scroll-manager.service';
 
 export const SetScrollOperation: IOperation<IScrollManagerInsertParam> = {
     id: 'sheet.operation.set-scroll',
+
     type: CommandType.OPERATION,
 
-    handler: (accessor, params: IScrollManagerInsertParam) => {
+    handler: (accessor, params) => {
         if (params == null) {
             return false;
         }
@@ -35,7 +36,7 @@ export const SetScrollOperation: IOperation<IScrollManagerInsertParam> = {
         const worksheet = workbook!.getSheetBySheetId(params!.sheetId);
         const { xSplit, ySplit } = worksheet!.getConfig().freeze;
 
-        scrollManagerService.setScrollInfo({
+        scrollManagerService.addOrReplaceByParam({
             ...params,
             sheetViewStartRow: params.sheetViewStartRow - ySplit,
             sheetViewStartColumn: params.sheetViewStartColumn - xSplit,
diff --git a/packages/sheets-ui/src/common/utils.ts b/packages/sheets-ui/src/common/utils.ts
index f852110591..1ebc6a5008 100644
--- a/packages/sheets-ui/src/common/utils.ts
+++ b/packages/sheets-ui/src/common/utils.ts
@@ -194,18 +194,18 @@ export function transformPosition2Offset(x: number, y: number, scene: Scene, ske
     const freezeWidth = endSheetView.startX - startSheetView.startX;
     const freezeHeight = endSheetView.startY - startSheetView.startY;
 
-    const { top, left, viewportScrollX, viewportScrollY } = viewMain;
+    const { top, left, viewportScrollX: actualScrollX, viewportScrollY: actualScrollY } = viewMain;
     let offsetX: number;
     // viewMain or viewTop
     if (x > left) {
-        offsetX = (x - viewportScrollX) * scaleX;
+        offsetX = (x - actualScrollX) * scaleX;
     } else {
         offsetX = ((freezeWidth + rowHeaderWidth) - (left - x)) * scaleX;
     }
 
     let offsetY: number;
     if (y > top) {
-        offsetY = (y - viewportScrollY) * scaleY;
+        offsetY = (y - actualScrollY) * scaleY;
     } else {
         offsetY = ((freezeHeight + columnHeaderHeight) - (top - y)) * scaleX;
     }
diff --git a/packages/sheets-ui/src/controllers/editor/formula-editor.controller.ts b/packages/sheets-ui/src/controllers/editor/formula-editor.controller.ts
index 80cda63821..21f5440efc 100644
--- a/packages/sheets-ui/src/controllers/editor/formula-editor.controller.ts
+++ b/packages/sheets-ui/src/controllers/editor/formula-editor.controller.ts
@@ -484,7 +484,7 @@ export class FormulaEditorController extends RxDisposable {
             if (scrollBar == null) {
                 viewportMain && new ScrollBar(viewportMain, { enableHorizontal: false, barSize: 8 });
             } else {
-                viewportMain?.resetCanvasSizeAndUpdateScrollBar();
+                viewportMain?.resetSizeAndScrollBar();
             }
         } else {
             scrollBar = null;
diff --git a/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts b/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts
index 2be40f6346..89a190334a 100644
--- a/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts
+++ b/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts
@@ -366,7 +366,7 @@ export class StartEditController extends Disposable {
             if (scrollBar == null) {
                 viewportMain && new ScrollBar(viewportMain, { enableHorizontal: false, barSize: 8 });
             } else {
-                viewportMain?.resetCanvasSizeAndUpdateScrollBar();
+                viewportMain?.resetSizeAndScrollBar();
             }
         } else {
             scrollBar = null;
diff --git a/packages/sheets-ui/src/controllers/render-controllers/freeze.render-controller.ts b/packages/sheets-ui/src/controllers/render-controllers/freeze.render-controller.ts
index 18ae50b2ff..8adcf14d19 100644
--- a/packages/sheets-ui/src/controllers/render-controllers/freeze.render-controller.ts
+++ b/packages/sheets-ui/src/controllers/render-controllers/freeze.render-controller.ts
@@ -26,7 +26,7 @@ import {
     toDisposable,
 } from '@univerjs/core';
 import type { IMouseEvent, IPointerEvent, IRenderContext, IRenderController, IScrollObserverParam, Viewport } from '@univerjs/engine-render';
-import { CURSOR_TYPE, Rect, SHEET_VIEWPORT_KEY, TRANSFORM_CHANGE_OBSERVABLE_TYPE, Vector2 } from '@univerjs/engine-render';
+import { CURSOR_TYPE, Rect, TRANSFORM_CHANGE_OBSERVABLE_TYPE, Vector2 } from '@univerjs/engine-render';
 import type {
     IInsertColCommandParams,
     IInsertRowCommandParams,
@@ -184,7 +184,6 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
         this._zoomRefresh();
     }
 
-    // eslint-disable-next-line max-lines-per-function
     private _createFreeze(
         freezeDirectionType: FREEZE_DIRECTION_TYPE = FREEZE_DIRECTION_TYPE.ROW,
         freezeConfig?: IFreeze
@@ -369,7 +368,7 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
         const scene = sheetObject.scene;
 
         const scale = Math.max(scene.scaleX, scene.scaleY);
-        const currentScroll = this._scrollManagerService.getCurrentScrollInfo();
+        const currentScroll = this._scrollManagerService.getCurrentScroll();
 
         const skeletonViewHeight = (sheetObject.engine.height - skeleton.columnHeaderHeight) / scale;
         const start = currentScroll?.sheetViewStartRow ?? 0;
@@ -563,7 +562,7 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
                 // alert(`moveColumnTo: ${this._changeToColumn}`);
             }
 
-            const sheetViewScroll = this._scrollManagerService.getCurrentScrollInfo() || {
+            const sheetViewScroll = this._scrollManagerService.getCurrentScroll() || {
                 sheetViewStartRow: 0,
                 sheetViewStartColumn: 0,
             };
@@ -636,20 +635,20 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
         }
         const { scene } = sheetObject;
 
-        const viewColumnLeft = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_COLUMN_LEFT);
-        const viewColumnRight = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_COLUMN_RIGHT);
+        const viewColumnLeft = scene.getViewport(VIEWPORT_KEY.VIEW_COLUMN_LEFT);
+        const viewColumnRight = scene.getViewport(VIEWPORT_KEY.VIEW_COLUMN_RIGHT);
 
         // row header
-        const viewRowTop = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_ROW_TOP);
-        const viewRowBottom = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_ROW_BOTTOM);
+        const viewRowTop = scene.getViewport(VIEWPORT_KEY.VIEW_ROW_TOP);
+        const viewRowBottom = scene.getViewport(VIEWPORT_KEY.VIEW_ROW_BOTTOM);
 
-        const viewLeftTop = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_LEFT_TOP);
+        const viewLeftTop = scene.getViewport(VIEWPORT_KEY.VIEW_LEFT_TOP);
 
         // skeleton
-        const viewMain = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN);
-        const viewMainLeftTop = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT_TOP);
-        const viewMainLeft = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT);
-        const viewMainTop = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN_TOP);
+        const viewMain = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
+        const viewMainLeftTop = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN_LEFT_TOP);
+        const viewMainLeft = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN_LEFT);
+        const viewMainTop = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN_TOP);
 
         if (
             viewColumnLeft == null ||
@@ -689,13 +688,13 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
 
         this.disposeWithMe(
             viewMain.onScrollAfterObserver.add((param: IScrollObserverParam) => {
-                const { scrollX, scrollY, viewportScrollX, viewportScrollY } = param;
+                const { scrollX, scrollY, actualScrollX, actualScrollY } = param;
 
                 if (viewRowBottom.isActive) {
                     viewRowBottom
                         .updateScroll({
                             scrollY,
-                            viewportScrollY,
+                            actualScrollY,
                         });
                 }
 
@@ -703,14 +702,14 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
                     viewColumnRight
                         .updateScroll({
                             scrollX,
-                            viewportScrollX,
+                            actualScrollX,
                         });
                 }
                 if (viewMainLeft.isActive) {
                     viewMainLeft
                         .updateScroll({
                             scrollY,
-                            viewportScrollY,
+                            actualScrollY,
                         });
                 }
 
@@ -718,10 +717,10 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
                     viewMainTop
                         .updateScroll({
                             scrollX,
-                            viewportScrollX,
+                            actualScrollX,
                         });
                 }
-            })
+            })!
         );
     }
 
@@ -849,9 +848,9 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
             });
             viewMainTop
                 .updateScroll({
-                    viewportScrollY: startSheetView.startY,
+                    actualScrollY: startSheetView.startY,
                     x: viewMain.scrollX,
-                    viewportScrollX: viewMain.viewportScrollX,
+                    actualScrollX: viewMain.viewportScrollX,
                 });
             viewRowTop.resize({
                 left: 0,
@@ -861,7 +860,7 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
             });
             viewRowTop
                 .updateScroll({
-                    viewportScrollY: startSheetView.startY,
+                    actualScrollY: startSheetView.startY,
                 });
             viewRowBottom.resize({
                 left: 0,
@@ -904,9 +903,9 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
             });
             viewMainLeft
                 .updateScroll({
-                    viewportScrollX: startSheetView.startX,
+                    actualScrollX: startSheetView.startX,
                     y: viewMain.scrollY,
-                    viewportScrollY: viewMain.viewportScrollY,
+                    actualScrollY: viewMain.viewportScrollY,
                 });
             viewColumnLeft.resize({
                 left: rowHeaderWidthAndMarginLeft,
@@ -916,7 +915,7 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
             });
             viewColumnLeft
                 .updateScroll({
-                    viewportScrollX: startSheetView.startX,
+                    actualScrollX: startSheetView.startX,
                 });
             viewColumnRight.resize({
                 left: rowHeaderWidthAndMarginLeft + leftGap,
@@ -968,9 +967,9 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
             });
             viewMainLeft
                 .updateScroll({
-                    viewportScrollX: startSheetView.startX,
+                    actualScrollX: startSheetView.startX,
                     y: viewMain.scrollY,
-                    viewportScrollY: viewMain.viewportScrollY,
+                    actualScrollY: viewMain.viewportScrollY,
                 });
             viewMainTop.resize({
                 left: rowHeaderWidthAndMarginLeft + leftGap,
@@ -980,9 +979,9 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
             });
             viewMainTop
                 .updateScroll({
-                    viewportScrollY: startSheetView.startY,
+                    actualScrollY: startSheetView.startY,
                     x: viewMain.scrollX,
-                    viewportScrollX: viewMain.viewportScrollX,
+                    actualScrollX: viewMain.viewportScrollX,
                 });
             viewMainLeftTop.resize({
                 left: rowHeaderWidthAndMarginLeft,
@@ -993,8 +992,8 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
 
             viewMainLeftTop
                 .updateScroll({
-                    viewportScrollX: startSheetView.startX,
-                    viewportScrollY: startSheetView.startY,
+                    actualScrollX: startSheetView.startX,
+                    actualScrollY: startSheetView.startY,
                 });
 
             viewRowTop.resize({
@@ -1006,7 +1005,7 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
 
             viewRowTop
                 .updateScroll({
-                    viewportScrollY: startSheetView.startY,
+                    actualScrollY: startSheetView.startY,
                 });
 
             viewRowBottom.resize({
@@ -1025,7 +1024,7 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
 
             viewColumnLeft
                 .updateScroll({
-                    viewportScrollX: startSheetView.startX,
+                    actualScrollX: startSheetView.startX,
                 });
 
             viewColumnRight.resize({
diff --git a/packages/sheets-ui/src/controllers/render-controllers/scroll.render-controller.ts b/packages/sheets-ui/src/controllers/render-controllers/scroll.render-controller.ts
index ed56dfc914..72f408b580 100644
--- a/packages/sheets-ui/src/controllers/render-controllers/scroll.render-controller.ts
+++ b/packages/sheets-ui/src/controllers/render-controllers/scroll.render-controller.ts
@@ -23,14 +23,13 @@ import {
     RANGE_TYPE,
     toDisposable,
 } from '@univerjs/core';
-import type { IRenderContext, IRenderController, IScrollObserverParam } from '@univerjs/engine-render';
-import { IRenderManagerService, SHEET_VIEWPORT_KEY } from '@univerjs/engine-render';
+import type { IRenderContext, IRenderController } from '@univerjs/engine-render';
+import { IRenderManagerService } from '@univerjs/engine-render';
 import { ScrollToCellOperation, SelectionManagerService } from '@univerjs/sheets';
 import { Inject } from '@wendellhu/redi';
 
 import { ScrollCommand } from '../../commands/commands/set-scroll.command';
-// import { SHEET_VIEWPORT_KEY } from '../../common/keys';
-import type { IScrollManagerSearchParam } from '../../services/scroll-manager.service';
+import { VIEWPORT_KEY } from '../../common/keys';
 import { ScrollManagerService } from '../../services/scroll-manager.service';
 import type { ISheetSkeletonManagerParam } from '../../services/sheet-skeleton-manager.service';
 import { SheetSkeletonManagerService } from '../../services/sheet-skeleton-manager.service';
@@ -165,11 +164,10 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
             return;
         }
 
-        const viewportMain = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN);
+        const viewportMain = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
         this.disposeWithMe(
             toDisposable(
-                // set scrollInf, event triggered in viewport@_scrollToScrollbarPos
-                viewportMain?.onScrollAfterObserver.add((param: IScrollObserverParam) => {
+                viewportMain?.onScrollAfterObserver.add((param) => {
                     const skeleton = this._sheetSkeletonManagerService.getCurrent()?.skeleton;
                     if (skeleton == null || param.isTrigger === false) {
                         return;
@@ -180,26 +178,21 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
                         return;
                     }
 
-                    const { viewportScrollX = 0, viewportScrollY = 0 } = param;
+                    const { actualScrollX = 0, actualScrollY = 0 } = param;
 
                     // according to the actual scroll position, the most suitable row, column and offset combination is recalculated.
                     const { row, column, rowOffset, columnOffset } = skeleton.getDecomposedOffset(
-                        viewportScrollX,
-                        viewportScrollY
+                        actualScrollX,
+                        actualScrollY
                     );
 
-                    // update scroll infos in scrollManagerService again!
-                    // because raw param from scroll-command offsetX may be negative or over max value.
-                    const lastestScrollInfo = {
+                    // update scroll infos in scroll manager service
+                    this._scrollManagerService.addOrReplaceNoRefresh({
                         sheetViewStartRow: row,
                         sheetViewStartColumn: column,
                         offsetX: columnOffset,
                         offsetY: rowOffset,
-                        scrollLeft: viewportScrollX,
-                        scrollTop: viewportScrollY,
-                    };
-                    this._scrollManagerService.setScrollInfoToCurrSheetWithoutNotify(lastestScrollInfo);
-                    this._scrollManagerService.setScrollInfoToSnapshot(lastestScrollInfo);
+                    });
                 })
             )
         );
@@ -215,13 +208,14 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
                     if (skeleton == null || sheetObject == null) {
                         return;
                     }
-                    const { viewportScrollX = 0, viewportScrollY = 0 } = param;
+                    const { actualScrollX = 0, actualScrollY = 0 } = param;
 
                     const freeze = this._getFreeze();
 
+                    // according to the actual scroll position, the most suitable row, column and offset combination is recalculated.
                     const { row, column, rowOffset, columnOffset } = skeleton.getDecomposedOffset(
-                        viewportScrollX,
-                        viewportScrollY
+                        actualScrollX,
+                        actualScrollY
                     );
 
                     this._commandService.executeCommand(ScrollCommand.id, {
@@ -235,11 +229,10 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
         );
     }
 
+    // scroll command -> scroll manager service -> scrollInfo$ -> viewport scroll API
     private _scrollSubscribeBinding() {
         this.disposeWithMe(
             toDisposable(
-                // wheel event --> set-scroll.command('sheet.operation.set-scroll') --> scroll.operation.ts --> scrollManagerService.setScrollInfo(raw value, may be negative)  --> scrollInfo$.next --> current fn() --> viewport.scrollTo
-                // --> onScrollAfterObserver.notify ---> scrollManagerService.setScrollInfo again!(valid scroll value)
                 this._scrollManagerService.scrollInfo$.subscribe((param) => {
                     const skeleton = this._sheetSkeletonManagerService.getCurrent()?.skeleton;
                     const sheetObject = this._getSheetObject();
@@ -249,9 +242,9 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
 
                     const scene = sheetObject.scene;
 
-                    // const { scaleX, scaleY } = sheetObject.scene.getAncestorScale();
+                    const { scaleX, scaleY } = sheetObject.scene.getAncestorScale();
 
-                    const viewportMain = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN);
+                    const viewportMain = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
 
                     if (viewportMain == null) {
                         return;
@@ -265,20 +258,17 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
                         return;
                     }
 
-                    // data source: scroll-manager.service.ts@_scrollInfo
+                    // 数据源 packages/sheets-ui/src/services/scroll-manager.service.ts@_addByParam
                     const { sheetViewStartRow, sheetViewStartColumn, offsetX, offsetY } = param;
 
                     const { startX, startY } = skeleton.getCellByIndexWithNoHeader(
                         sheetViewStartRow,
                         sheetViewStartColumn
                     );
+                    const x = startX + offsetX;
+                    const y = startY + offsetY;
 
-                    // viewportScrollXByEvent is not same as viewportScrollX, by event may be negative, or over max
-                    // so, before
-                    const viewportScrollXByEvent = startX + offsetX;
-                    const viewportScrollYByEvent = startY + offsetY;
-
-                    const config = viewportMain.transViewportScroll2ScrollValue(viewportScrollXByEvent, viewportScrollYByEvent);
+                    const config = viewportMain.getBarScroll(x, y);
                     viewportMain.scrollTo(config);
                 })
             )
@@ -287,23 +277,26 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
 
     private _initSkeletonListener() {
         this.disposeWithMe(toDisposable(
-            this._sheetSkeletonManagerService.currentSkeletonBefore$.subscribe((param) => {
+            this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
                 if (param == null) {
                     return;
                 }
-                // this._scrollManagerService.setSearchParam(param as unknown as ISheetSkeletonManagerParam);
-                const sheetObject = this._getSheetObject();
-                if (!sheetObject) return;
-                const scene = sheetObject.scene;
-                const viewportMain = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN);
-                const currScrollInfo = this._scrollManagerService.getScrollInfoByParam(param as unknown as IScrollManagerSearchParam);
-                if (viewportMain && currScrollInfo) {
-                    viewportMain.viewportScrollX = currScrollInfo.viewportScrollLeft || 0;
-                    viewportMain.viewportScrollY = currScrollInfo.viewportScrollTop || 0;
+
+                const { unitId, sheetId } = param;
+                const currentRender = this._renderManagerService.getRenderById(unitId);
+
+                if (currentRender == null) {
+                    return;
                 }
-                // this function would call setSearchParam
-                this._updateSceneSize(param as unknown as ISheetSkeletonManagerParam);
-            })));
+
+                this._updateSceneSize(param);
+
+                this._scrollManagerService.setCurrentScroll({
+                    unitId,
+                    sheetId,
+                });
+            })
+        ));
     }
 
     private _updateSceneSize(param: ISheetSkeletonManagerParam) {
@@ -320,9 +313,7 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
 
         const { rowTotalHeight, columnTotalWidth, rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } =
             skeleton;
-        this._scrollManagerService.setSearchParam(param);
 
-        // would cause viewport.resetSizeAndScrollBar
         scene?.transformByState({
             width: rowHeaderWidthAndMarginLeft + columnTotalWidth,
             height: columnHeaderHeightAndMarginTop + rowTotalHeight,
@@ -388,7 +379,7 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
             return;
         }
 
-        const viewport = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN);
+        const viewport = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
         if (viewport == null) {
             return;
         }
@@ -402,7 +393,6 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
         return skeleton.getRowColumnSegment(bounds);
     }
 
-    // eslint-disable-next-line max-lines-per-function, complexity
     private _scrollToCell(row: number, column: number): boolean {
         const { rowHeightAccumulation, columnWidthAccumulation } = this._sheetSkeletonManagerService.getCurrent()?.skeleton ?? {};
 
@@ -411,7 +401,7 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
         const scene = this._getSheetObject()?.scene;
         if (scene == null) return false;
 
-        const viewport = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN);
+        const viewport = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
         if (viewport == null) return false;
 
         const skeleton = this._sheetSkeletonManagerService.getCurrent()?.skeleton;
@@ -477,7 +467,7 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
 
         if (startSheetViewRow === undefined && startSheetViewColumn === undefined) return false;
 
-        const { offsetX, offsetY } = this._scrollManagerService.getCurrentScrollInfo() || {};
+        const { offsetX, offsetY } = this._scrollManagerService.getCurrentScroll() || {};
         return this._commandService.syncExecuteCommand(ScrollCommand.id, {
             sheetViewStartRow: startSheetViewRow,
             sheetViewStartColumn: startSheetViewColumn,
@@ -485,53 +475,4 @@ export class SheetsScrollRenderController extends Disposable implements IRenderC
             offsetY: startSheetViewRow === undefined ? offsetY : 0,
         });
     }
-
-    private _getViewports() {
-        const sheetObject = this._getSheetObject();
-        if (sheetObject == null) {
-            return;
-        }
-        const { scene } = sheetObject;
-
-        const viewColumnLeft = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_COLUMN_LEFT);
-        const viewColumnRight = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_COLUMN_RIGHT);
-
-        // row header
-        const viewRowTop = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_ROW_TOP);
-        const viewRowBottom = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_ROW_BOTTOM);
-
-        const viewLeftTop = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_LEFT_TOP);
-
-        // skeleton
-        const viewMain = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN);
-        const viewMainLeftTop = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT_TOP);
-        const viewMainLeft = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT);
-        const viewMainTop = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN_TOP);
-
-        if (
-            viewColumnLeft == null ||
-            viewColumnRight == null ||
-            viewRowTop == null ||
-            viewRowBottom == null ||
-            viewLeftTop == null ||
-            viewMain == null ||
-            viewMainLeftTop == null ||
-            viewMainLeft == null ||
-            viewMainTop == null
-        ) {
-            return;
-        }
-
-        return {
-            viewMain,
-            viewMainLeftTop,
-            viewMainLeft,
-            viewMainTop,
-            viewColumnLeft,
-            viewColumnRight,
-            viewRowTop,
-            viewRowBottom,
-            viewLeftTop,
-        };
-    }
 }
diff --git a/packages/sheets-ui/src/controllers/render-controllers/zoom.render-controller.ts b/packages/sheets-ui/src/controllers/render-controllers/zoom.render-controller.ts
index 66d377339d..9b307b9062 100644
--- a/packages/sheets-ui/src/controllers/render-controllers/zoom.render-controller.ts
+++ b/packages/sheets-ui/src/controllers/render-controllers/zoom.render-controller.ts
@@ -91,7 +91,7 @@ export class SheetsZoomRenderController extends Disposable implements IRenderCon
             const workbook = this._context.unit;
             const worksheet = workbook.getActiveSheet();
             const zoomRatio = worksheet.getZoomRatio() || 1;
-            // this._updateViewZoom(zoomRatio);
+            this._updateViewZoom(zoomRatio);
         }));
     }
 
diff --git a/packages/sheets-ui/src/services/drag-manager.service.ts b/packages/sheets-ui/src/services/drag-manager.service.ts
index ae5394a5fa..14039e4e4a 100644
--- a/packages/sheets-ui/src/services/drag-manager.service.ts
+++ b/packages/sheets-ui/src/services/drag-manager.service.ts
@@ -79,7 +79,7 @@ export class DragManagerService extends Disposable {
         const skeletonParam = this._sheetSkeletonManagerService.getCurrent();
         const currentRender = this._renderManagerService.getRenderById(workbook.getUnitId());
 
-        const scrollInfo = this._scrollManagerService.getCurrentScrollInfo();
+        const scrollInfo = this._scrollManagerService.getCurrentScroll();
 
         if (!skeletonParam || !scrollInfo || !currentRender) return;
 
diff --git a/packages/sheets-ui/src/services/hover-manager.service.ts b/packages/sheets-ui/src/services/hover-manager.service.ts
index 64ee82600d..c3ee3dc7a0 100644
--- a/packages/sheets-ui/src/services/hover-manager.service.ts
+++ b/packages/sheets-ui/src/services/hover-manager.service.ts
@@ -84,7 +84,7 @@ export class HoverManagerService extends Disposable {
         const skeletonParam = this._sheetSkeletonManagerService.getCurrent();
         const currentRender = this._renderManagerService.getRenderById(workbook.getUnitId());
 
-        const scrollInfo = this._scrollManagerService.getCurrentScrollInfo();
+        const scrollInfo = this._scrollManagerService.getCurrentScroll();
 
         if (!skeletonParam || !scrollInfo || !currentRender) return;
 
diff --git a/packages/sheets-ui/src/services/scroll-manager.service.ts b/packages/sheets-ui/src/services/scroll-manager.service.ts
index 1d2508782e..06827b2b9e 100644
--- a/packages/sheets-ui/src/services/scroll-manager.service.ts
+++ b/packages/sheets-ui/src/services/scroll-manager.service.ts
@@ -14,20 +14,14 @@
  * limitations under the License.
  */
 
-import { IUniverInstanceService, type Nullable } from '@univerjs/core';
+import type { Nullable } from '@univerjs/core';
 import { BehaviorSubject } from 'rxjs';
-import { Inject } from '@wendellhu/redi';
-import { SheetSkeletonManagerService } from './sheet-skeleton-manager.service';
 
 export interface IScrollManagerParam {
     offsetX: number;
     offsetY: number;
     sheetViewStartRow: number;
     sheetViewStartColumn: number;
-    scrollLeft?: number;
-    scrollTop?: number;
-    viewportScrollLeft?: number;
-    viewportScrollTop?: number;
 }
 
 export interface IScrollManagerSearchParam {
@@ -51,94 +45,60 @@ export class ScrollManagerService {
     private readonly _scrollInfo$ = new BehaviorSubject<Nullable<IScrollManagerParam>>(null);
     readonly scrollInfo$ = this._scrollInfo$.asObservable();
 
-    private _searchParamForScroll: Nullable<IScrollManagerSearchParam> = null;
-
-    constructor(
-        @IUniverInstanceService private readonly _univerInstanceService: IUniverInstanceService,
-        @Inject(SheetSkeletonManagerService) private readonly _sheetSkeletonManagerService: SheetSkeletonManagerService
-    ) {
-    }
+    private _currentScroll: Nullable<IScrollManagerSearchParam> = null;
 
     dispose(): void {
         this._scrollInfo$.complete();
     }
 
-    setSearchParam(param: IScrollManagerSearchParam) {
-        this._searchParamForScroll = param;
-    }
+    setCurrentScroll(param: IScrollManagerSearchParam) {
+        this._currentScroll = param;
 
-    setSearchParamAndRefresh(param: IScrollManagerSearchParam) {
-        this._searchParamForScroll = param;
-        this._notifyCurrentScrollInfo(param);
+        this._refresh(param);
     }
 
-    getScrollInfoByParam(param: IScrollManagerSearchParam): Readonly<Nullable<IScrollManagerParam>> {
+    getScrollByParam(param: IScrollManagerSearchParam): Readonly<Nullable<IScrollManagerParam>> {
         return this._getCurrentScroll(param);
     }
 
-    getCurrentScrollInfo(): Readonly<Nullable<IScrollManagerParam>> {
-        return this._getCurrentScroll(this._searchParamForScroll);
-    }
-
-    setScrollInfoToSnapshot(scrollInfo: IScrollManagerParam) {
-        if (this._searchParamForScroll == null) {
-            return;
-        }
-        const { unitId, sheetId } = this._searchParamForScroll;
-        const workbook = this._univerInstanceService.getUniverSheetInstance(unitId);
-        const worksheet = workbook?.getSheetBySheetId(sheetId);
-        const cfg = worksheet?.getConfig();
-        if (cfg) {
-            cfg.scrollLeft = scrollInfo.scrollLeft || 0;
-            cfg.scrollTop = scrollInfo.scrollTop || 0;
-        }
-    }
-
-    /**
-     * set scrollInfo by cmd,
-     * call _setScrollInfo twice after one scrolling.
-     * first time set scrollInfo bt scrollOperation, but offsetXY is derived from scroll event.
-     * second time set scrollInfo by viewport.scrollTo(scrol.render-controller --> onScrollAfterObserver), this time offsetXY has been limited.
-     *
-     * wheelevent --> sheetCanvasView -->  set-scroll.command('sheet.command.set-scroll-relative') --> scrollOperation --> this.setScrollInfo  --> scrollInfo$.next --> scroll.render-controller@viewportMain.scrollTo & notify -->
-     * scroll.render-controller@onScrollAfterObserver --> this.setScrollInfoToCurrSheetWithoutNotify --> this._setScrollInfo({}, false)
-     * call _setScrollInfo again, a loop!, so we should call setScrollInfoToCurrSheetWithoutNotify
-     * @param param
-     */
-    setScrollInfo(param: IScrollManagerInsertParam) {
-        this._setScrollInfo(param);
+    getCurrentScroll(): Readonly<Nullable<IScrollManagerParam>> {
+        return this._getCurrentScroll(this._currentScroll);
     }
 
-    setScrollInfoToCurrSheet(scrollInfo: IScrollManagerParam) {
-        if (this._searchParamForScroll == null) {
+    addOrReplace(scroll: IScrollManagerParam) {
+        if (this._currentScroll == null) {
             return;
         }
 
-        this._setScrollInfo({
-            ...this._searchParamForScroll,
-            ...scrollInfo,
+        this._addByParam({
+            ...this._currentScroll,
+            ...scroll,
         });
     }
 
-    setScrollInfoToCurrSheetWithoutNotify(scroll: IScrollManagerParam) {
-        if (this._searchParamForScroll == null) {
+    addOrReplaceNoRefresh(scroll: IScrollManagerParam) {
+        if (this._currentScroll == null) {
             return;
         }
 
-        this._setScrollInfo(
+        this._addByParam(
             {
-                ...this._searchParamForScroll,
+                ...this._currentScroll,
                 ...scroll,
             },
             false
         );
     }
 
+    addOrReplaceByParam(param: IScrollManagerInsertParam) {
+        this._addByParam(param);
+    }
+
     clear(): void {
-        if (this._searchParamForScroll == null) {
+        if (this._currentScroll == null) {
             return;
         }
-        this._clearByParam(this._searchParamForScroll);
+        this._clearByParam(this._currentScroll);
     }
 
     // scrollToCell(startRow: number, startColumn: number) {
@@ -151,69 +111,37 @@ export class ScrollManagerService {
     //     const {} = skeleton.getCellByIndex(startRow, startColumn);
     // }
 
-    calcViewportScrollFromOffset(scrollInfo: IScrollManagerInsertParam) {
-        const { unitId } = scrollInfo;
-        const workbookScrollInfo = this._scrollInfo.get(unitId);
-        if (workbookScrollInfo == null) {
-            return {
-                scrollTop: 0,
-                scrollLeft: 0,
-            };
-        }
-        // const scrollInfo = workbookScrollInfo.get(param.sheetId);
-        let { sheetViewStartColumn, sheetViewStartRow, offsetX, offsetY } = scrollInfo;
-        sheetViewStartRow = sheetViewStartRow || 0;
-        offsetY = offsetY || 0;
-        const skeleton = this._sheetSkeletonManagerService.getCurrent()?.skeleton;
-        const rowAcc = skeleton?.rowHeightAccumulation[sheetViewStartRow - 1] || 0;
-        const colAcc = skeleton?.columnWidthAccumulation[sheetViewStartColumn - 1] || 0;
-        const viewportScrollLeft = colAcc + offsetX;
-        const viewportScrollTop = rowAcc + offsetY;
-
-        return {
-            viewportScrollLeft,
-            viewportScrollTop,
-            // scrollTop: rowAcc + offsetY,
-            // scrollLeft: colAcc + offsetX,
-        };
-    }
-
-    private _setScrollInfo(newScrollInfo: IScrollManagerInsertParam, notifyScrollInfo = true): void {
-        const { unitId, sheetId, sheetViewStartColumn, sheetViewStartRow, offsetX, offsetY } = newScrollInfo;
+    private _addByParam(insertParam: IScrollManagerInsertParam, isRefresh = true): void {
+        const { unitId, sheetId, sheetViewStartColumn, sheetViewStartRow, offsetX, offsetY } = insertParam;
 
         if (!this._scrollInfo.has(unitId)) {
             this._scrollInfo.set(unitId, new Map());
         }
 
-        const workbookScrollInfo = this._scrollInfo.get(unitId)!;
-        const scrollLeftTopByRowColOffset = this.calcViewportScrollFromOffset(newScrollInfo);
-        // console.log('scrollTop', newScrollInfo.sheetId, scrollLeftTopByRowColOffset.viewportScrollTop);
-        const scrollInfo: IScrollManagerParam = {
+        const sheetScroll = this._scrollInfo.get(unitId)!;
+
+        sheetScroll.set(sheetId, {
             sheetViewStartRow,
             sheetViewStartColumn,
             offsetX,
             offsetY,
-            viewportScrollLeft: scrollLeftTopByRowColOffset.viewportScrollLeft,
-            viewportScrollTop: scrollLeftTopByRowColOffset.viewportScrollTop,
-        };
-        workbookScrollInfo.set(sheetId, scrollInfo);
-        if (notifyScrollInfo === true) {
-            this._notifyCurrentScrollInfo({ unitId, sheetId });
+        });
+
+        if (isRefresh === true) {
+            this._refresh({ unitId, sheetId });
         }
     }
 
     private _clearByParam(param: IScrollManagerSearchParam): void {
-        this._setScrollInfo({
+        this._addByParam({
             ...param,
             sheetViewStartRow: 0,
             sheetViewStartColumn: 0,
             offsetX: 0,
             offsetY: 0,
-            // scrollLeft: 0,
-            // scrollTop: 0,
         });
 
-        this._notifyCurrentScrollInfo(param);
+        this._refresh(param);
     }
 
     private _getCurrentScroll(param: Nullable<IScrollManagerSearchParam>) {
@@ -224,10 +152,7 @@ export class ScrollManagerService {
         return this._scrollInfo.get(unitId)?.get(sheetId);
     }
 
-    private _notifyCurrentScrollInfo(param: IScrollManagerSearchParam): void {
-        const scrollInfo = this._getCurrentScroll(param);
-
-        // subscribe this._scrollManagerService.scrollInfo$ in scroll.render-controller
-        this._scrollInfo$.next(scrollInfo);
+    private _refresh(param: IScrollManagerSearchParam): void {
+        this._scrollInfo$.next(this._getCurrentScroll(param));
     }
 }
diff --git a/packages/sheets-ui/src/services/sheet-skeleton-manager.service.ts b/packages/sheets-ui/src/services/sheet-skeleton-manager.service.ts
index a87140eb23..1feaf426fd 100644
--- a/packages/sheets-ui/src/services/sheet-skeleton-manager.service.ts
+++ b/packages/sheets-ui/src/services/sheet-skeleton-manager.service.ts
@@ -47,7 +47,7 @@ export interface ISheetSkeletonManagerSearch {
  * @todo RenderUnit - We should move this to RenderUnit as well after all dependents have been moved.
  */
 export class SheetSkeletonManagerService implements IDisposable {
-    private _currentSkeletonSearchParam: ISheetSkeletonManagerSearch = {
+    private _currentSkeleton: ISheetSkeletonManagerSearch = {
         unitId: '',
         sheetId: '',
     };
@@ -78,7 +78,7 @@ export class SheetSkeletonManagerService implements IDisposable {
 
     /** @deprecated */
     getCurrent(): Nullable<ISheetSkeletonManagerParam> {
-        return this._getSkeleton(this._currentSkeletonSearchParam);
+        return this._getSkeleton(this._currentSkeleton);
     }
 
     getUnitSkeleton(unitId: string, sheetId: string): Nullable<ISheetSkeletonManagerParam> {
@@ -136,7 +136,7 @@ export class SheetSkeletonManagerService implements IDisposable {
             });
         }
 
-        this._currentSkeletonSearchParam = searchParam;
+        this._currentSkeleton = searchParam;
 
         const nextParam = this.getCurrent();
         this._currentSkeletonBefore$.next(nextParam);
@@ -160,7 +160,7 @@ export class SheetSkeletonManagerService implements IDisposable {
     }
 
     makeDirtyCurrent(state: boolean = true) {
-        this.makeDirty(this._currentSkeletonSearchParam, state);
+        this.makeDirty(this._currentSkeleton, state);
     }
 
     makeDirty(searchParm: ISheetSkeletonManagerSearch, state: boolean = true) {
diff --git a/packages/sheets-zen-editor/src/controllers/zen-editor.controller.ts b/packages/sheets-zen-editor/src/controllers/zen-editor.controller.ts
index ee9dcd6892..24ce8dcf36 100644
--- a/packages/sheets-zen-editor/src/controllers/zen-editor.controller.ts
+++ b/packages/sheets-zen-editor/src/controllers/zen-editor.controller.ts
@@ -37,7 +37,6 @@ import {
     VIEWPORT_KEY,
 } from '@univerjs/docs';
 import { DeviceInputEventType, IRenderManagerService } from '@univerjs/engine-render';
-import type { Viewport } from '@univerjs/engine-render';
 import { getEditorObject, IEditorBridgeService } from '@univerjs/sheets-ui';
 import type { IEditorBridgeServiceParam } from '@univerjs/sheets-ui';
 import { IZenZoneService } from '@univerjs/ui';
@@ -308,9 +307,9 @@ export class ZenEditorController extends RxDisposable {
         docsComponent.translate(docsLeft, docsTop);
         docBackground.translate(docsLeft, docsTop);
 
-        const viewport = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN) as Viewport;
+        const viewport = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
         if (scrollToX !== Number.POSITIVE_INFINITY && viewport != null) {
-            const actualX = viewport.transScroll2ViewportScrollValue(scrollToX, 0).x;
+            const actualX = viewport.getBarScroll(scrollToX, 0).x;
             viewport.scrollTo({
                 x: actualX,
             });
diff --git a/packages/slides/src/views/render/adaptors/docs-adaptor.ts b/packages/slides/src/views/render/adaptors/docs-adaptor.ts
index 7b1055e504..7ea87b7cf6 100644
--- a/packages/slides/src/views/render/adaptors/docs-adaptor.ts
+++ b/packages/slides/src/views/render/adaptors/docs-adaptor.ts
@@ -351,7 +351,7 @@ export class DocsAdaptor extends ObjectAdaptor {
         docsComponent.translate(docsLeft, docsTop);
 
         if (scrollToX !== Number.POSITIVE_INFINITY && viewport != null) {
-            const actualX = viewport.transScroll2ViewportScrollValue(scrollToX, 0).x;
+            const actualX = viewport.getBarScroll(scrollToX, 0).x;
             viewport.scrollTo({
                 x: actualX,
             });
diff --git a/packages/slides/src/views/render/adaptors/spreadsheet-adaptor.ts b/packages/slides/src/views/render/adaptors/spreadsheet-adaptor.ts
index 64fd196e3b..31b911c36a 100644
--- a/packages/slides/src/views/render/adaptors/spreadsheet-adaptor.ts
+++ b/packages/slides/src/views/render/adaptors/spreadsheet-adaptor.ts
@@ -204,18 +204,18 @@ export class SpreadsheetAdaptor extends ObjectAdaptor {
         // viewMain.linkToViewport(viewLeft, LINK_VIEW_PORT_TYPE.Y);
         // viewMain.linkToViewport(viewTop, LINK_VIEW_PORT_TYPE.X);
         viewMain.onScrollAfterObserver.add((param: IScrollObserverParam) => {
-            const { scrollX, scrollY, viewportScrollX, viewportScrollY } = param;
+            const { scrollX, scrollY, actualScrollX, actualScrollY } = param;
 
             viewTop
                 .updateScroll({
                     scrollX,
-                    viewportScrollX,
+                    actualScrollX,
                 });
 
             viewLeft
                 .updateScroll({
                     scrollY,
-                    viewportScrollY,
+                    actualScrollY,
                 });
         });
 
diff --git a/packages/slides/src/views/render/canvas-view.ts b/packages/slides/src/views/render/canvas-view.ts
index fcb4bec709..a172ff8c28 100644
--- a/packages/slides/src/views/render/canvas-view.ts
+++ b/packages/slides/src/views/render/canvas-view.ts
@@ -109,7 +109,7 @@ export class CanvasView extends RxDisposable {
         if (!viewMain || !getCenterPositionViewPort) return;
         const { left: viewPortLeft, top: viewPortTop } = getCenterPositionViewPort;
 
-        const { x, y } = viewMain.transViewportScroll2ScrollValue(viewPortLeft, viewPortTop);
+        const { x, y } = viewMain.getBarScroll(viewPortLeft, viewPortTop);
 
         viewMain.scrollTo({
             x,