docs: add scrollbar demo #5688 (#5707)

site/examples/component/scrollbar/demo/meta.json

@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "scrollbar.ts",
+      "title": {
+        "zh": "滚动条",
+        "en": "Scrollbar"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ompnRpW0vycAAAAAAAAAAAAADmJ7AQ/original"
+    }
+  ]
+}

site/examples/component/scrollbar/demo/scrollbar.ts

@@ -0,0 +1,30 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+});
+
+chart
+  .line()
+  .data({
+    type: 'fetch',
+    value:
+      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
+  })
+  .encode('x', 'date')
+  .encode('y', 'close')
+  // 开启 X 轴方向上的滚动条
+  .scrollbar('x', {})
+  .scrollbar('y', { value: 0.2 });
+
+chart.on('afterrender', () => {
+  const { canvas } = chart.getContext();
+  const { document } = canvas;
+  document
+    .querySelector('.g2-scrollbar')
+    .addEventListener('valuechange', (evt) => {
+      console.info(evt.detail);
+    });
+});
+
+chart.render();

site/examples/component/scrollbar/index.en.md

@@ -0,0 +1,4 @@
+---
+title: 滚动条
+order: 5
+---

site/examples/component/scrollbar/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: Scrollbar
+order: 5
+---