diff --git a/demo/components/scrollbarDemo/scaffold.demo.vue b/demo/components/scrollbarDemo/scaffold.demo.vue
index 691ddb5f8..998a92992 100644
--- a/demo/components/scrollbarDemo/scaffold.demo.vue
+++ b/demo/components/scrollbarDemo/scaffold.demo.vue
@@ -8,7 +8,11 @@
       style="flex-wrap: nowrap;"
     >
       <!--EXAMPLE_START-->
-      Write some demo here
+      <div style="width: 400px; height: 300px;">
+        <n-scrollbar>
+          <div style="background: linear-gradient(red, blue); width: 100%; height: 500px;" />
+        </n-scrollbar>
+      </div>
       <!--EXAMPLE_END-->
     </div>
     <pre class="n-doc-section__inspect">Inspect some value here</pre>
diff --git a/packages/common/Scrollbar/src/main.vue b/packages/common/Scrollbar/src/main.vue
index 2c186544a..9008c3f47 100644
--- a/packages/common/Scrollbar/src/main.vue
+++ b/packages/common/Scrollbar/src/main.vue
@@ -1,9 +1,46 @@
 <template>
-  <div>example</div>
+  <div
+    ref="scrollContainer"
+    class="n-scrollbar"
+    @scroll="handleScroll"
+  >
+    <slot />
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'NScrollBar'
+  name: 'NScrollbar',
+  mounted () {
+    this.$el.parentElement.style.position = 'relative'
+    this.$el.parentElement.style.overflow = 'hidden'
+    this.$el.parentElement.classList.add('n-scrollbar-wrapper')
+  },
+  methods: {
+    handleScroll () {
+      console.log(this.$refs.scrollContainer.scrollTop)
+      console.log('scroll')
+    }
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+.n-scrollbar-wrapper {
+
+}
+
+.n-scrollbar {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  overflow: scroll;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+</style>