diff --git a/examples/interaction/customBehavior/demo/dragCanvasTwoFingers.js b/examples/interaction/customBehavior/demo/dragCanvasTwoFingers.js
new file mode 100644
index 0000000000..8ae733cadf
--- /dev/null
+++ b/examples/interaction/customBehavior/demo/dragCanvasTwoFingers.js
@@ -0,0 +1,59 @@
+import G6 from '@antv/g6';
+
+/**
+ * This demo shows how to custom a behavior to allow drag canvas with two fingers on touchpad and wheel
+ * By Shiwu
+ */
+G6.registerBehavior('double-finger-drag-canvas', {
+  getEvents: function getEvents() {
+    return {
+      wheel: 'onWheel'
+    };
+  },
+
+  onWheel: function onWheel(ev) {
+    if (ev.ctrlKey) {
+      const canvas = graph.get('canvas');
+      const pixelRatio = canvas.get('pixelRatio');
+      const point = canvas.getPointByClient(ev.clientX, ev.clientY);
+      let ratio = graph.getZoom();
+      if (ev.wheelDelta > 0) {
+        ratio = ratio + ratio * 0.05;
+      } else {
+        ratio = ratio - ratio * 0.05;
+      }
+      graph.zoomTo(ratio, {
+        x: point.x / pixelRatio,
+        y: point.y / pixelRatio
+      });
+    } else {
+      const x = ev.deltaX || ev.movementX;
+      const y = ev.deltaY || ev.movementY;
+      graph.translate(-x, -y);
+    }
+    ev.preventDefault();
+  }
+});
+
+
+const width = document.getElementById('container').scrollWidth;
+const height = document.getElementById('container').scrollHeight || 500;
+const graph = new G6.Graph({
+  container: 'container',
+  width,
+  height,
+  modes: {
+    default: ['double-finger-drag-canvas']
+  },
+  layout: {
+    type: 'force'
+  },
+});
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
+  .then(res => res.json())
+  .then(data => {
+    graph.data(data);
+    graph.render();
+  });
+
diff --git a/examples/interaction/customBehavior/demo/meta.json b/examples/interaction/customBehavior/demo/meta.json
new file mode 100644
index 0000000000..98b5d32dda
--- /dev/null
+++ b/examples/interaction/customBehavior/demo/meta.json
@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "dragCanvasTwoFingers.js",
+      "title": {
+        "zh": "两指平移画布",
+        "en": "Drag Canvas by Two fingers"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*wc1-QaqOPsgAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/interaction/customBehavior/index.en.md b/examples/interaction/customBehavior/index.en.md
new file mode 100644
index 0000000000..e67c9c7d88
--- /dev/null
+++ b/examples/interaction/customBehavior/index.en.md
@@ -0,0 +1,10 @@
+---
+title: Custom Behavior
+order: 10
+---
+
+Custom a behavior when the [built-in behaviors](/en/docs/manual/middle/states/defaultBehavior) do not meet your requirements.
+
+## Usage
+
+Custom a behavior with `graph.registerBehavior`, refer to [Custom Behavior Doc](en/docs/manual/advanced/custom-behavior).
diff --git a/examples/interaction/customBehavior/index.zh.md b/examples/interaction/customBehavior/index.zh.md
new file mode 100644
index 0000000000..27ae810240
--- /dev/null
+++ b/examples/interaction/customBehavior/index.zh.md
@@ -0,0 +1,10 @@
+---
+title: 自定义交互
+order: 10
+---
+
+当[内置 behavior](/zh/docs/manual/middle/states/defaultBehavior)不能满足需求时，可以自定义交互。
+
+## 使用指南
+
+使用 `graph.registerBehavior` 自定义交互，教程参见 [自定义交互](zh/docs/manual/advanced/custom-behavior)。
\ No newline at end of file