diff --git a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
index 3d4abd6ce..8b0e17f1d 100644
--- a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable filename-rules/match */
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, type UIEvent } from 'react';
 import { useParams } from 'react-router';
 import {
     MuiBox as Box,
@@ -37,7 +37,8 @@ export function Page(props: PageProps) {
     const { user } = useUserAndSpaces();
     const templatesPortalFlag = useFlag('BooleanTemplatesPortal', false);
     const dailyNotesFlag = useFlag('BooleanDailyNotes', false);
-    const editor = useRef<BlockEditor>();
+    const editorRef = useRef<BlockEditor>();
+    const scrollContainerRef = useRef();
 
     useEffect(() => {
         if (!user?.id || !page_id) return;
@@ -60,6 +61,13 @@ export function Page(props: PageProps) {
         updateRecentPages();
     }, [user, props.workspace, page_id]);
 
+    const onScroll = (event: UIEvent) => {
+        editorRef.current.scrollManager.scrollContainer =
+            scrollContainerRef.current;
+        editorRef.current.getHooks().onRootNodeScroll(event);
+        editorRef.current.scrollManager.emitScrollEvent(event);
+    };
+
     return (
         <LigoApp>
             <LigoLeftContainer style={{ width: fixedDisplay ? '300px' : 0 }}>
@@ -104,12 +112,12 @@ export function Page(props: PageProps) {
                     </WorkspaceSidebarContent>
                 </WorkspaceSidebar>
             </LigoLeftContainer>
-            <LigoRightContainer>
+            <LigoRightContainer ref={scrollContainerRef} onScroll={onScroll}>
                 {page_id ? (
                     <AffineEditor
                         workspace={props.workspace}
                         rootBlockId={page_id}
-                        ref={editor}
+                        ref={editorRef}
                     />
                 ) : (
                     <Box
diff --git a/libs/components/editor-core/src/editor/plugin/hooks.ts b/libs/components/editor-core/src/editor/plugin/hooks.ts
index ffc56dffe..5a54bd784 100644
--- a/libs/components/editor-core/src/editor/plugin/hooks.ts
+++ b/libs/components/editor-core/src/editor/plugin/hooks.ts
@@ -133,4 +133,8 @@ export class Hooks implements HooksRunner, PluginHooks {
     public beforeCut(e: ClipboardEvent): void {
         this._runHook(HookType.BEFORE_CUT, e);
     }
+
+    public onRootNodeScroll(e: React.UIEvent): void {
+        this._runHook(HookType.ON_ROOTNODE_SCROLL, e);
+    }
 }
diff --git a/libs/components/editor-core/src/editor/scroll/scroll.ts b/libs/components/editor-core/src/editor/scroll/scroll.ts
index 08651fe63..9c63d1bce 100644
--- a/libs/components/editor-core/src/editor/scroll/scroll.ts
+++ b/libs/components/editor-core/src/editor/scroll/scroll.ts
@@ -1,3 +1,4 @@
+import { type UIEvent } from 'react';
 import EventEmitter from 'eventemitter3';
 
 import { domToRect, Rect } from '@toeverything/utils';
@@ -9,7 +10,8 @@ type VerticalTypes = 'up' | 'down' | null;
 type HorizontalTypes = 'left' | 'right' | null;
 
 export class ScrollManager {
-    private _editor: BlockEditor;
+    private _editor: Block_editor;
+    private _scrollContainer: HTMLElement;
     private _animationFrame: null | number = null;
     private _eventName = 'scrolling';
     private _currentMoveDirection: [HorizontalTypes, VerticalTypes] = [
@@ -41,7 +43,10 @@ export class ScrollManager {
     }
 
     public get scrollContainer() {
-        return this._editor.ui_container;
+        return this._scrollContainer;
+    }
+    public set scrollContainer(dom: HTMLElement) {
+        this._scrollContainer = dom;
     }
 
     public get verticalScrollTriggerDistance() {
@@ -53,22 +58,26 @@ export class ScrollManager {
     }
 
     public get scrollTop() {
-        return this._editor.ui_container.scrollTop;
+        return this._scrollContainer.scrollTop;
     }
     public set scrollTop(top: number) {
-        this._editor.ui_container.scrollTop = top;
+        this._scrollContainer.scrollTop = top;
     }
     public get scrollLeft() {
-        return this._editor.ui_container.scrollLeft;
+        return this._scrollContainer.scrollLeft;
     }
     public set scrollLeft(left: number) {
-        this._editor.ui_container.scrollLeft = left;
+        this._scrollContainer.scrollLeft = left;
     }
     public get scrollMoveOffset() {
         return this._scrollMoveOffset;
     }
-    public get scrollingEvent() {
-        return this._scrollingEvent;
+
+    public emitScrollEvent(event: UIEvent) {
+        this._scrollingEvent.emit(this._eventName, {
+            direction: this._currentMoveDirection,
+            event,
+        });
     }
 
     public scrollTo({
@@ -84,13 +93,13 @@ export class ScrollManager {
         left = left !== undefined ? left : this.scrollContainer.scrollLeft;
 
         if (behavior === 'smooth') {
-            this._editor.ui_container.scrollBy({
+            this._scrollContainer.scrollBy({
                 top,
                 left,
                 behavior,
             });
         } else {
-            this._editor.ui_container.scrollTo(left, top);
+            this._scrollContainer.scrollTo(left, top);
         }
     }
 
@@ -110,7 +119,7 @@ export class ScrollManager {
         if (!block.dom) {
             return console.warn(`Block is not exist.`);
         }
-        const containerRect = domToRect(this._editor.ui_container);
+        const containerRect = domToRect(this._scrollContainer);
         const blockRect = domToRect(block.dom);
 
         const blockRelativeTopToEditor =
@@ -153,7 +162,7 @@ export class ScrollManager {
     }
 
     private _getKeepInViewParams(blockRect: Rect) {
-        const { top, bottom } = domToRect(this._editor.ui_container);
+        const { top, bottom } = domToRect(this._scrollContainer);
         if (blockRect.top <= top + blockRect.height * 3) {
             return -1;
         }
@@ -218,9 +227,9 @@ export class ScrollManager {
                 behavior: 'auto',
             });
             this._updateScrollInfo(left, top);
-            this._scrollingEvent.emit(this._eventName, {
-                direction: this._currentMoveDirection,
-            });
+            // this._scrollingEvent.emit(this._eventName, {
+            //     direction: this._currentMoveDirection,
+            // });
             this._autoScroll();
         });
     }
diff --git a/libs/components/editor-core/src/editor/types.ts b/libs/components/editor-core/src/editor/types.ts
index b9928ae57..c40db2ecb 100644
--- a/libs/components/editor-core/src/editor/types.ts
+++ b/libs/components/editor-core/src/editor/types.ts
@@ -175,6 +175,7 @@ export enum HookType {
     AFTER_ON_NODE_DRAG_OVER = 'afterOnNodeDragOver',
     BEFORE_COPY = 'beforeCopy',
     BEFORE_CUT = 'beforeCut',
+    ON_ROOTNODE_SCROLL = 'onRootNodeScroll',
 }
 
 export interface BlockDomInfo {
@@ -222,6 +223,7 @@ export interface HooksRunner {
     ) => void;
     beforeCopy: (e: ClipboardEvent) => void;
     beforeCut: (e: ClipboardEvent) => void;
+    onRootNodeScroll: (e: React.UIEvent) => void;
 }
 
 export type PayloadType<T extends Array<any>> = T extends []