diff --git a/src/scroll/index.js b/src/scroll/index.js
index 85634b1..07ba7c2 100644
--- a/src/scroll/index.js
+++ b/src/scroll/index.js
@@ -8,13 +8,7 @@ import { css, bind, html, unbind, Component } from '@bd/core'
 
 class Scroll extends Component {
   static props = {
-    axis: {
-      type: String,
-      default: 'xy',
-      observer(val) {
-        this.onAxisChange(val)
-      }
-    },
+    axis: 'xy',
     distance: 0
   }
   dragging = false
@@ -23,7 +17,7 @@ class Scroll extends Component {
     css`
       :host {
         position: relative;
-        overflow: hidden;
+        overflow: auto;
         display: block;
         &::-webkit-scrollbar {
           display: none;
@@ -34,7 +28,6 @@ class Scroll extends Component {
         position: relative;
       }
       .scroll-bar {
-        display: none;
         position: absolute;
         background: #909399;
         width: 0;
@@ -64,16 +57,22 @@ class Scroll extends Component {
           visibility: hidden;
         }
       }
+      :host([axis='x']) {
+        overflow-x: auto;
+        overflow-y: hidden;
+        .vertical {
+          display: none;
+        }
+      }
+      :host([axis='y']) {
+        overflow-y: auto;
+        overflow-x: hidden;
+        .horizon {
+          display: none;
+        }
+      }
     `
   ]
-  onAxisChange(val) {
-    this.style.overflow = 'hidden'
-    if (val === 'xy') {
-      this.style.overflow = 'auto'
-    } else {
-      this.style[`overflow-${val}`] = 'auto'
-    }
-  }
 
   render() {
     return html`
@@ -193,12 +192,10 @@ class Scroll extends Component {
       this.horizonWidth = 0
     }
     if (axis.includes('x')) {
-      horizon.style.display = 'block'
       horizon.style.width = this.horizonWidth + 'px'
       bind(horizon, 'mousedown', this.onmousedown.bind(this))
     }
     if (axis.includes('y')) {
-      vertical.style.display = 'block'
       vertical.style.height = this.verticalHeight + 'px'
       bind(vertical, 'mousedown', this.onmousedown.bind(this))
     }