diff --git a/packages/board/__tests__/__snapshots__/wheel.test.ts.snap b/packages/board/__tests__/__snapshots__/wheel.test.ts.snap
new file mode 100644
index 0000000..b5561f8
--- /dev/null
+++ b/packages/board/__tests__/__snapshots__/wheel.test.ts.snap
@@ -0,0 +1,705 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@idraw/board scroll 1`] = `
+Array [
+  Object {
+    "props": Object {
+      "height": 1600,
+      "width": 2400,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  Object {
+    "props": Object {
+      "height": 1600,
+      "width": 2400,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  Object {
+    "props": Object {
+      "dHeight": 1600,
+      "dWidth": 2400,
+      "dx": -2400,
+      "dy": -1600,
+      "img": <canvas
+        height="1600"
+        width="2400"
+      />,
+      "sHeight": 1600,
+      "sWidth": 2400,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
+  Object {
+    "props": Object {
+      "height": 80,
+      "width": 2400,
+      "x": 0,
+      "y": 1520,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 2240,
+            "y": 1520,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2400,
+            "cpx2": 2400,
+            "cpy1": 1520,
+            "cpy2": 1600,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2400,
+            "cpx2": 2200,
+            "cpy1": 1600,
+            "cpy2": 1600,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2200,
+            "cpx2": 2200,
+            "cpy1": 1600,
+            "cpy2": 1520,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2200,
+            "cpx2": 2400,
+            "cpy1": 1520,
+            "cpy2": 1520,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  Object {
+    "props": Object {
+      "height": 1600,
+      "width": 80,
+      "x": 2320,
+      "y": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 2360,
+            "y": 1400,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2400,
+            "cpx2": 2400,
+            "cpy1": 1400,
+            "cpy2": 1600,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2400,
+            "cpx2": 2320,
+            "cpy1": 1600,
+            "cpy2": 1600,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2320,
+            "cpx2": 2320,
+            "cpy1": 1600,
+            "cpy2": 1400,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2320,
+            "cpx2": 2400,
+            "cpy1": 1400,
+            "cpy2": 1400,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+]
+`;
+
+exports[`@idraw/board scroll 2`] = `
+Array [
+  Object {
+    "props": Object {
+      "height": 1600,
+      "width": 2400,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  Object {
+    "props": Object {
+      "height": 1600,
+      "width": 2400,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  Object {
+    "props": Object {
+      "dHeight": 1600,
+      "dWidth": 2400,
+      "dx": -2400,
+      "dy": -1600,
+      "img": <canvas
+        height="1600"
+        width="2400"
+      />,
+      "sHeight": 1600,
+      "sWidth": 2400,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
+  Object {
+    "props": Object {
+      "height": 80,
+      "width": 2400,
+      "x": 0,
+      "y": 1520,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 2240,
+            "y": 1520,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2400,
+            "cpx2": 2400,
+            "cpy1": 1520,
+            "cpy2": 1600,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2400,
+            "cpx2": 2200,
+            "cpy1": 1600,
+            "cpy2": 1600,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2200,
+            "cpx2": 2200,
+            "cpy1": 1600,
+            "cpy2": 1520,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2200,
+            "cpx2": 2400,
+            "cpy1": 1520,
+            "cpy2": 1520,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  Object {
+    "props": Object {
+      "height": 1600,
+      "width": 80,
+      "x": 2320,
+      "y": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 2360,
+            "y": 1400,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2400,
+            "cpx2": 2400,
+            "cpy1": 1400,
+            "cpy2": 1600,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2400,
+            "cpx2": 2320,
+            "cpy1": 1600,
+            "cpy2": 1600,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2320,
+            "cpx2": 2320,
+            "cpy1": 1600,
+            "cpy2": 1400,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 2320,
+            "cpx2": 2400,
+            "cpy1": 1400,
+            "cpy2": 1400,
+            "radius": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+]
+`;
diff --git a/packages/board/__tests__/wheel.test.ts b/packages/board/__tests__/wheel.test.ts
new file mode 100644
index 0000000..a69b567
--- /dev/null
+++ b/packages/board/__tests__/wheel.test.ts
@@ -0,0 +1,57 @@
+import Board from '../src';
+import { getData } from './data';
+
+describe('@idraw/board', () => {
+  test('scroll', async () => {  
+    document.body.innerHTML = `
+      <div id="mount"></div>
+    `;
+    const opts = {
+      width: 600,
+      height: 400,
+      contextWidth: 600,
+      contextHeight: 400,
+      devicePixelRatio: 4,
+      canScroll: true,
+      scrollConfig: {
+        lineWidth: 20,
+        color: '#666666'
+      }
+    }
+    const mount = document.querySelector('#mount') as HTMLDivElement;
+    const board = new Board(mount, opts);
+  
+    const ctx = board.getContext();
+    const data = getData();
+    board.clear();
+    ctx.clearRect(0, 0, opts.width, opts.height);
+    ctx.setFillStyle('#ffffff');
+    ctx.fillRect(0, 0, opts.width, opts.height);
+    data.elements.forEach(ele => {
+      ctx.setFillStyle(ele.desc.color);
+      ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
+    });
+  
+    const resultScale =board.scale(2);
+    expect(resultScale).toStrictEqual({"position":{"top":0,"bottom":-400,"left":0,"right":-600},"size":{"x":0,"y":0,"w":1200,"h":800}})
+  
+    const resultX =board.scrollX(-600);
+    expect(resultX).toStrictEqual({"position":{"top":0,"bottom":-400,"left":-600,"right":0},"size":{"x":-1200,"y":0,"w":1200,"h":800}})
+  
+    const resultY =board.scrollY(-400); 
+    expect(resultY).toStrictEqual({"position":{"top":-400,"bottom":0,"left":-600,"right":0},"size":{"x":-1200,"y":-800,"w":1200,"h":800}})
+  
+    board.draw();
+  
+    const originCtx = board.getOriginContext();
+    // @ts-ignore;
+    const originCalls = originCtx.__getDrawCalls();
+    expect(originCalls).toMatchSnapshot();
+  
+    const displayCtx = board.getDisplayContext();
+    // @ts-ignore;
+    const displayCalls = displayCtx.__getDrawCalls();
+    expect(displayCalls).toMatchSnapshot();
+  });
+});
+