diff --git a/blocksuite/affine/blocks/block-root/src/page/page-root-block.ts b/blocksuite/affine/blocks/block-root/src/page/page-root-block.ts
index 521103a0b..028db3176 100644
--- a/blocksuite/affine/blocks/block-root/src/page/page-root-block.ts
+++ b/blocksuite/affine/blocks/block-root/src/page/page-root-block.ts
@@ -12,7 +12,6 @@ import {
   PageViewportService,
   ViewportElementProvider,
 } from '@blocksuite/affine-shared/services';
-import type { Viewport } from '@blocksuite/affine-shared/types';
 import {
   focusTitle,
   getClosestBlockComponentByPoint,
@@ -158,33 +157,16 @@ export class PageRootBlockComponent extends BlockComponent<
     return getScrollContainer(this);
   }
 
-  get viewport(): Viewport | null {
-    if (!this.viewportElement) {
-      return null;
-    }
-    const {
-      scrollLeft,
-      scrollTop,
-      scrollWidth,
-      scrollHeight,
-      clientWidth,
-      clientHeight,
-    } = this.viewportElement;
-    const { top, left } = this.viewportElement.getBoundingClientRect();
-    return {
-      top,
-      left,
-      scrollLeft,
-      scrollTop,
-      scrollWidth,
-      scrollHeight,
-      clientWidth,
-      clientHeight,
-    };
+  get viewportProvider() {
+    return this.std.get(ViewportElementProvider);
+  }
+
+  get viewport() {
+    return this.viewportProvider.viewport;
   }
 
   get viewportElement(): HTMLElement {
-    return this.std.get(ViewportElementProvider).viewportElement;
+    return this.viewportProvider.viewportElement;
   }
 
   private _createDefaultNoteBlock() {
diff --git a/blocksuite/affine/blocks/block-root/src/widgets/page-dragging-area/page-dragging-area.ts b/blocksuite/affine/blocks/block-root/src/widgets/page-dragging-area/page-dragging-area.ts
index 3998d1840..50eb7b9fe 100644
--- a/blocksuite/affine/blocks/block-root/src/widgets/page-dragging-area/page-dragging-area.ts
+++ b/blocksuite/affine/blocks/block-root/src/widgets/page-dragging-area/page-dragging-area.ts
@@ -1,4 +1,5 @@
 import { NoteBlockModel, RootBlockModel } from '@blocksuite/affine-model';
+import { ViewportElementProvider } from '@blocksuite/affine-shared/services';
 import {
   autoScroll,
   getScrollContainer,
@@ -15,8 +16,6 @@ import { html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import type { PageRootBlockComponent } from '../../index.js';
-
 type Rect = {
   left: number;
   top: number;
@@ -32,10 +31,7 @@ type BlockInfo = {
 export const AFFINE_PAGE_DRAGGING_AREA_WIDGET =
   'affine-page-dragging-area-widget';
 
-export class AffinePageDraggingAreaWidget extends WidgetComponent<
-  RootBlockModel,
-  PageRootBlockComponent
-> {
+export class AffinePageDraggingAreaWidget extends WidgetComponent<RootBlockModel> {
   static excludeFlavours: string[] = ['affine:note', 'affine:surface'];
 
   private _dragging = false;
@@ -167,9 +163,7 @@ export class AffinePageDraggingAreaWidget extends WidgetComponent<
   }
 
   private get _viewport() {
-    const rootComponent = this.block;
-    if (!rootComponent) return;
-    return rootComponent.viewport;
+    return this.std.get(ViewportElementProvider).viewport;
   }
 
   private get scrollContainer() {
diff --git a/blocksuite/affine/blocks/block-root/src/widgets/viewport-overlay/viewport-overlay.ts b/blocksuite/affine/blocks/block-root/src/widgets/viewport-overlay/viewport-overlay.ts
index bed5a7854..475b4f9e7 100644
--- a/blocksuite/affine/blocks/block-root/src/widgets/viewport-overlay/viewport-overlay.ts
+++ b/blocksuite/affine/blocks/block-root/src/widgets/viewport-overlay/viewport-overlay.ts
@@ -5,14 +5,9 @@ import { state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import type { PageRootBlockComponent } from '../../index.js';
-
 export const AFFINE_VIEWPORT_OVERLAY_WIDGET = 'affine-viewport-overlay-widget';
 
-export class AffineViewportOverlayWidget extends WidgetComponent<
-  RootBlockModel,
-  PageRootBlockComponent
-> {
+export class AffineViewportOverlayWidget extends WidgetComponent<RootBlockModel> {
   static override styles = css`
     .affine-viewport-overlay-widget {
       position: absolute;