From e20db59dcc9d74ac5ce77b34c046889989ca2ca0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent.io@gmail.com>
Date: Sat, 8 May 2021 13:38:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=BB=9A=E5=8A=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=9B=A0=E4=B8=BAmargin=E5=8E=9F=E5=9B=A0=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E7=9A=84=E8=AE=A1=E7=AE=97=E4=B8=8D=E6=AD=A3=E7=A1=AE?=
 =?UTF-8?q?=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/markd/index.wc  |  3 ---
 src/scroll/index.wc | 30 +++++++++++++++++-------------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/markd/index.wc b/src/markd/index.wc
index 34b0f18..155c7ba 100644
--- a/src/markd/index.wc
+++ b/src/markd/index.wc
@@ -209,9 +209,6 @@ export default class Markd {
     } else {
       this.__BOX__.innerHTML = ''
     }
-    this.dispatchEvent(
-      new CustomEvent('ready', { bubbles: true, cancelable: true })
-    )
   }
 
   clear() {
diff --git a/src/scroll/index.wc b/src/scroll/index.wc
index d089f9e..fa25b4f 100644
--- a/src/scroll/index.wc
+++ b/src/scroll/index.wc
@@ -21,7 +21,6 @@
 
   .wrapper {
     overflow: auto;
-    position: relative;
     width: calc(100% + 18px);
     height: calc(100% + 18px);
     padding: 0 18px 18px 0;
@@ -32,6 +31,7 @@
 
 .is-horizontal,
 .is-vertical {
+  display: none;
   visibility: hidden;
   position: absolute;
   display: flex;
@@ -238,16 +238,25 @@ export default class Scroll {
 
   mounted() {
     // 初始化滚动条的位置和长度
-    this._initFn = $.catch(this, 'ready', ev => {
+    this._initFn = ev => {
       // 需要减去因为隐藏原生滚动条修正的18像素
-      var width = this.__BOX__.clientWidth - 18
-      var height = this.__BOX__.clientHeight - 18
+      var width = this.offsetWidth
+      var height = this.offsetHeight
       var scrollWidth = this.__BOX__.scrollWidth - 18
       var scrollHeight = this.__BOX__.scrollHeight - 18
-
       var yBar = (height * (height / scrollHeight)) >> 0 // 滚动条的高度
       var xBar = (width * (width / scrollWidth)) >> 0 // 滚动条的宽度
 
+      // 修复因为内容的margin导致滚动条取值不准确的bug
+      if (this.__BOX__.clientHeight - height !== 18) {
+        scrollHeight += 18 - (this.__BOX__.clientHeight - height)
+        yBar = (height * (height / scrollHeight)) >> 0
+      }
+      if (this.__BOX__.clientWidth - width !== 18) {
+        scrollWidth += 18 - (this.__BOX__.clientWidth - width)
+        xBar = (width * (width / scrollWidth)) >> 0
+      }
+
       if (yBar < 50) {
         yBar = 50
       }
@@ -272,7 +281,7 @@ export default class Scroll {
 
       this.__X__.style.width = xBar + 'px'
       this.__Y__.style.height = yBar + 'px'
-    })
+    }
 
     // 鼠标滚动事件
     this._scrollFn = $.catch(this.__BOX__, 'scroll', ev => {
@@ -381,13 +390,8 @@ export default class Scroll {
       $.bind(document, 'mouseup', mouseupFn)
     })
 
-    this.__observer = new MutationObserver(this._initFn)
-    this.__observer.observe(this, {
-      childList: true,
-      subtree: true,
-      attributeFilter: ['style']
-    })
-    $.nextTick(_ => this._initFn(new Event('mounted')))
+    this.__observer = new ResizeObserver(this._initFn)
+    this.__observer.observe(this.__BOX__)
   }
 
   unmounted() {