diff --git a/__tests__/snapshot/board/examples/test/scroll.html.jpg b/__tests__/snapshot/board/examples/test/scroll.html.jpg
new file mode 100644
index 0000000..a07b020
Binary files /dev/null and b/__tests__/snapshot/board/examples/test/scroll.html.jpg differ
diff --git a/packages/board/examples/test/scroll.html b/packages/board/examples/test/scroll.html
new file mode 100644
index 0000000..17b910a
--- /dev/null
+++ b/packages/board/examples/test/scroll.html
@@ -0,0 +1,88 @@
+<html>
+  <head>
+    <style></style>
+    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <style>
+      html,body { margin: 0; padding: 0; }
+      #mount canvas {
+        margin-top: 40px;
+        margin-left: 50px;
+        border: 1px solid #aaaaaa40;
+        /* border-right: 1px solid #aaaaaa40;
+        border-bottom: 1px solid #aaaaaa40; */
+        background-image:
+        linear-gradient(#aaaaaa40 1px, transparent 0),
+        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
+        linear-gradient(#aaa 1px, transparent 0),
+        linear-gradient(90deg, #aaa 1px, transparent 0);
+        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div id="mount"></div>
+
+    <script src="./../../dist/index.global.js"></script>
+    <script>
+      const { Board } = window.iDraw; 
+      const mount = document.querySelector('#mount');
+      const opts = {
+        width: 600,
+        height: 400,
+        contextWidth: 1000,
+        contextHeight: 900,
+        devicePixelRatio: 4,
+        canScroll: true,
+      }
+      const board = new Board(mount, opts);
+      // board.on('wheelX', (deltaX) => {
+      //   console.log('deltaX =', deltaX);
+      // })
+      // board.on('wheelY', (deltaY) => {
+      //   console.log('deltaY =', deltaY);
+      // })
+
+      const ctx = board.getContext();
+
+      ctx.setFillStyle('#ffffff');
+      ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
+
+      ctx.setFillStyle('#f0f0f0');
+      ctx.fillRect(10, 10, 200, 120);
+
+      ctx.setFillStyle('#cccccc');
+      ctx.fillRect(80, 80, 200, 120);
+
+      ctx.setFillStyle('#c0c0c0');
+      ctx.fillRect(160, 160, 200, 120);
+
+      ctx.setFillStyle('#e0e0e0');
+      ctx.fillRect(260, 260, 200, 100);
+
+      ctx.setFillStyle('#e0e0e0');
+      ctx.fillRect(500 - 10, 500 - 10, 200, 100);
+
+      ctx.setFillStyle('#c0c0c0');
+      ctx.fillRect(600, 600, 200, 100);
+
+      ctx.setFillStyle('#cccccc');
+      ctx.fillRect(790, 790, 200, 100);
+
+      ctx.setFillStyle('#000');
+      ctx.fillRect(500 - 10, 450 - 10, 20, 20);
+
+      // board.scale(1.5);
+      board.scrollX(-200);
+      board.scrollY(-250);
+      // board.scale(1);
+
+      // const result = board.scale(1);
+      const result = board.scale(1);
+      console.log('result =', result);
+      board.draw();
+
+    </script>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/board/examples/test/wheel.html b/packages/board/examples/test/wheel.html
index 683bd6c..17b910a 100644
--- a/packages/board/examples/test/wheel.html
+++ b/packages/board/examples/test/wheel.html
@@ -73,21 +73,15 @@
       ctx.fillRect(500 - 10, 450 - 10, 20, 20);
 
       // board.scale(1.5);
-      // board.scrollX(-600);
-      // board.scrollY(-600);
+      board.scrollX(-200);
+      board.scrollY(-250);
       // board.scale(1);
 
       // const result = board.scale(1);
-      const result = board.scale(3);
+      const result = board.scale(1);
       console.log('result =', result);
       board.draw();
 
-      // setTimeout(() => {
-      //   const result = board.scale(2);
-      //   console.log('result =', result);
-      //   board.draw();
-      // }, 5000)
-
     </script>
 
   </body>
diff --git a/scripts/screen.config.js b/scripts/screen.config.js
index ce75824..c11f6c1 100644
--- a/scripts/screen.config.js
+++ b/scripts/screen.config.js
@@ -1,19 +1,20 @@
 const pageList = [
-  { path: 'board/examples/test/main.html', w: 600, h: 400, delay: 1000 },
-  { path: 'board/examples/test/transform-small.html', w: 600, h: 400, delay: 1000 },
-  { path: 'board/examples/test/transform-large.html', w: 600, h: 400, delay: 1000 },
-  { path: 'board/examples/test/scale-001.html', w: 600, h: 400, delay: 1000 },
-  { path: 'board/examples/test/scale-002.html', w: 600, h: 400, delay: 1000 },
-  { path: 'board/examples/test/scale-003.html', w: 600, h: 400, delay: 1000 },
-  { path: 'board/examples/test/scale-004.html', w: 600, h: 400, delay: 1000 },
-  { path: 'board/examples/test/scale-005.html', w: 600, h: 400, delay: 1000 },
-  { path: 'core/examples/features/rect.html', w: 600, h: 400, delay: 1000 },
-  { path: 'core/examples/features/text.html', w: 600, h: 400, delay: 1000 },
-  { path: 'core/examples/features/svg.html', w: 600, h: 400, delay: 1000 },
-  { path: 'core/examples/features/image.html', w: 600, h: 400, delay: 1000 },
-  { path: 'core/examples/test/scale-001.html', w: 600, h: 400, delay: 1000 },
-  { path: 'core/examples/test/scale-002.html', w: 600, h: 400, delay: 1000 },
-  { path: 'core/examples/test/scale-003.html', w: 600, h: 400, delay: 1000 },
+  { path: 'board/examples/test/main.html', w: 600, h: 400, delay: 500 },
+  { path: 'board/examples/test/transform-small.html', w: 600, h: 400, delay: 500 },
+  { path: 'board/examples/test/transform-large.html', w: 600, h: 400, delay: 500 },
+  { path: 'board/examples/test/scale-001.html', w: 600, h: 400, delay: 500 },
+  { path: 'board/examples/test/scale-002.html', w: 600, h: 400, delay: 500 },
+  { path: 'board/examples/test/scale-003.html', w: 600, h: 400, delay: 500 },
+  { path: 'board/examples/test/scale-004.html', w: 600, h: 400, delay: 500 },
+  { path: 'board/examples/test/scale-005.html', w: 600, h: 400, delay: 500 },
+  { path: 'board/examples/test/scroll.html', w: 600, h: 400, delay: 500 },
+  { path: 'core/examples/features/rect.html', w: 600, h: 400, delay: 500 },
+  { path: 'core/examples/features/text.html', w: 600, h: 400, delay: 500 },
+  { path: 'core/examples/features/svg.html', w: 600, h: 400, delay: 500 },
+  { path: 'core/examples/features/image.html', w: 600, h: 400, delay: 500 },
+  { path: 'core/examples/test/scale-001.html', w: 600, h: 400, delay: 500 },
+  { path: 'core/examples/test/scale-002.html', w: 600, h: 400, delay: 500 },
+  { path: 'core/examples/test/scale-003.html', w: 600, h: 400, delay: 500 },
   // { path: 'core/examples/test.html', w: 600, h: 600, delay: 8000 },
 ]
 
