diff --git a/public/assets/scripts/sync-scroll.js b/public/assets/scripts/sync-scroll.js
index c2f1231..6d386f8 100644
--- a/public/assets/scripts/sync-scroll.js
+++ b/public/assets/scripts/sync-scroll.js
@@ -1,23 +1,4 @@
 // 左右栏同步滚动
 $(document).ready(() => {
-  let timeout
-  $('div.CodeMirror-scroll, #preview').on('scroll', function callback () {
-    clearTimeout(timeout)
 
-    let source = $(this)
-    let target = $(source.is('#preview') ? 'div.CodeMirror-scroll' : '#preview')
-
-    target.off('scroll')
-
-    let source0 = source[0]
-    let target0 = target[0]
-
-    let percentage = source0.scrollTop / (source0.scrollHeight - source0.offsetHeight)
-    let height = percentage * (target0.scrollHeight - target0.offsetHeight)
-    target0.scrollTo(0, height)
-
-    timeout = setTimeout(() => {
-      target.on('scroll', callback)
-    }, 100)
-  })
 })
diff --git a/public/index.html b/public/index.html
index fdf725d..8148158 100644
--- a/public/index.html
+++ b/public/index.html
@@ -71,7 +71,7 @@
   <script src="libs/scripts/prettify.min.js"></script>
   <script src="libs/scripts/jquery.min.js"></script>
   <script src="libs/scripts/closebrackets.js"></script>
-  <script src="assets/scripts/sync-scroll.js"></script>
+  <!-- <script src="assets/scripts/sync-scroll.js"></script> -->
 
   <script>
     window.console
diff --git a/src/components/CodemirrorEditor.vue b/src/components/CodemirrorEditor.vue
index d5cce96..5c0ca1c 100644
--- a/src/components/CodemirrorEditor.vue
+++ b/src/components/CodemirrorEditor.vue
@@ -122,12 +122,11 @@
 </template>
 <script>
 import CodeMirror from 'codemirror/lib/codemirror'
-import 'codemirror/lib/codemirror.css'
+
 import 'codemirror/mode/css/css.js'
-import 'codemirror/theme/ambiance.css'
 import 'codemirror/addon/edit/matchbrackets'
 import 'codemirror/addon/selection/active-line'
-import 'codemirror/addon/hint/show-hint.css'
+
 import 'codemirror/addon/hint/show-hint.js'
 import 'codemirror/addon/hint/css-hint.js'
 import '../scripts/format.js'
@@ -177,7 +176,8 @@ export default {
       form: {
         rows: 1,
         cols: 1
-      }
+      },
+      timeout: null
     }
     d.currentFont = d.builtinFonts[0].value
     d.currentSize = d.sizeOption[2].value
@@ -493,7 +493,34 @@ export default {
         duration: 1600,
         type: 'success'
       })
+    },
+    // 左右栏同步滚动
+    leftAndRightScroll() {
+      console.log($)
+      $('div.CodeMirror-scroll, #preview').on('scroll', function callback () {
+        console.log(object)
+        clearTimeout(this.timeout)
+
+        let source = $(this)
+        let target = $(source.is('#preview') ? 'div.CodeMirror-scroll' : '#preview')
+
+        target.off('scroll')
+
+        let source0 = source[0]
+        let target0 = target[0]
+
+        let percentage = source0.scrollTop / (source0.scrollHeight - source0.offsetHeight)
+        let height = percentage * (target0.scrollHeight - target0.offsetHeight)
+        target0.scrollTo(0, height)
+
+        this.timeout = setTimeout(() => {
+          target.on('scroll', callback)
+        }, 100)
+      })
     }
+  },
+  mounted () {
+    this.leftAndRightScroll()
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index df1375a..9c083f7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,9 @@ import store from './store'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import './element'
-
+import 'codemirror/lib/codemirror.css';
+import "codemirror/theme/ambiance.css";
+import "codemirror/addon/hint/show-hint.css";
 Vue.use(ElementUI)
 
 Vue.config.productionTip = false