diff --git a/src/menu/index.js b/src/menu/index.js
index 05afb67a..4b146d03 100644
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -87,7 +87,8 @@ const demoComponents = {
         { path: `${pre}markdown/url`, title: '异步加载文件' }
       ]
     },
-    { path: `${pre}bigdata-table`, title: '超大量数据表格' },
+    { path: `${pre}bigdata-table`, title: '百万数量级表格' },
+    { path: `${pre}scrollbar`, title: '滚动条' },
     { path: `${pre}countup`, title: '数字动画' },
     { path: `${pre}editor-quill`, title: '富文本编辑器' },
     { path: `${pre}editor-simpleMDE`, title: 'markdown编辑器' },
diff --git a/src/pages/demo/components/scrollbar/index.vue b/src/pages/demo/components/scrollbar/index.vue
new file mode 100644
index 00000000..98881d84
--- /dev/null
+++ b/src/pages/demo/components/scrollbar/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <d2-container>
+    <template slot="header">自定义滚动条</template>
+    <el-card shadow="never" class="demo-scrollbar-card">
+      <div class="demo-scrollbar-card-inner">
+        <el-scrollbar>
+          <div class="demo-scrollbar-group">
+            <div v-for="n in 20" :key="n" class="demo-scrollbar-item">
+              <el-button size="mini">n : {{n}}</el-button>
+            </div>
+          </div>
+        </el-scrollbar>
+      </div>
+    </el-card>
+  </d2-container>
+</template>
+
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.demo-scrollbar-card {
+  width: 300px;
+  .demo-scrollbar-card-inner {
+    margin: -20px;
+  }
+  .demo-scrollbar-group {
+    height: 200px;
+    .demo-scrollbar-item {
+      padding: 10px;
+      border-bottom: 1px solid $color-border-4;
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/demo/components/scrollbar/md/doc.md b/src/pages/demo/components/scrollbar/md/doc.md
new file mode 100644
index 00000000..158a909f
--- /dev/null
+++ b/src/pages/demo/components/scrollbar/md/doc.md
@@ -0,0 +1 @@
+[hahaha](https://github.com/ElemeFE/element/issues/2238)
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index af0ce1e1..5f0be777 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,7 +42,8 @@ const routes = [
       { path: 'layout/grid', name: `${pre}layout-grid`, component: () => import('@/pages/demo/components/layout/grid.vue') },
       { path: 'layout/splitpane', name: `${pre}layout-splitpane`, component: () => import('@/pages/demo/components/layout/splitpane.vue') },
       { path: 'markdown/source', name: `${pre}markdown-source`, component: () => import('@/pages/demo/components/markdown/source.vue') },
-      { path: 'markdown/url', name: `${pre}markdown-url`, component: () => import('@/pages/demo/components/markdown/url.vue') }
+      { path: 'markdown/url', name: `${pre}markdown-url`, component: () => import('@/pages/demo/components/markdown/url.vue') },
+      { path: 'scrollbar', name: `${pre}scrollbar`, component: () => import('@/pages/demo/components/scrollbar/index.vue') }
     ])('demo-components-')
   },
   {