优化滚动条抖动

src/scroll/index.wc

@@ -137,8 +137,10 @@ export default class Scroll {
   }
 
   state = {
-    width: 0, // 滚动组件的真实宽度
+    width: 0, // 滚动组件的真实宽度(可视宽高)
-    height: 0, // 滚动组件的真实高度
+    height: 0, // 滚动组件的真实高度(可视宽高)
+    widthFixed: 0, // 滚动组件的宽度修正值
+    heightFixed: 0, // 滚动组件的高度修正值
     scrollWidth: 0, // 滚动组件的滚动宽度
     scrollHeight: 0, // 滚动组件的滚动高度
     xBar: 0, // 横轴长度
@@ -247,29 +249,50 @@ export default class Scroll {
       let scrollHeight = this.__BOX__.scrollHeight
       let yBar = 50 //  滚动条的高度
       let xBar = 50 // 滚动条的宽度
+      let { widthFixed, heightFixed } = this.state
+      let needFixed = false
       let style = ''
 
-      console.log(width, height, clientWidth, clientHeight, scrollWidth, scrollHeight)
+      // 已经修正过宽度
-
+      if (widthFixed > 0) {
-      // 高度超出, 说明出现横向滚动条
+        needFixed = scrollHeight === clientHeight
-      if (scrollHeight > clientHeight) {
+        widthFixed = needFixed ? 0 : widthFixed
-        // width - clientWidth 等于滚动条的宽度
+      } else {
-        style += `width:${width + (width - clientWidth)}px;`
+        // 高度超出, 说明出现横向滚动条
+        if (scrollHeight > clientHeight) {
+          // width - clientWidth 等于滚动条的宽度, 下同
+          needFixed = true
+          widthFixed = width + (width - clientWidth)
+        }
       }
 
-      if (scrollWidth > clientWidth) {
+      if (heightFixed > 0) {
-        // height - clientHeight 等于滚动条的宽度
+        needFixed = scrollWidth === clientWidth
-        style += `height:${height + (height - clientHeight)}px;`
+        heightFixed = needFixed ? 0 : heightFixed
+      } else {
+        if (scrollWidth > clientWidth) {
+          needFixed = true
+          heightFixed = height + (height - clientHeight)
+        }
       }
 
-      // 需要修正视图容器, 修正完之后, 需要重新获取滚动宽高
+      this.state.widthFixed = widthFixed
-      if (style) {
+      this.state.heightFixed = heightFixed
+
+      if (needFixed) {
+        if (widthFixed > 0) {
+          style += `width:${widthFixed}px;`
+        }
+
+        if (heightFixed > 0) {
+          style += `height:${heightFixed}px;`
+        }
         this.__BOX__.style.cssText = style
 
+        // 需要修正视图容器, 修正完之后, 需要重新获取滚动宽高
         scrollWidth = this.__BOX__.scrollWidth
         scrollHeight = this.__BOX__.scrollHeight
       }
-
       // 修正由于未知原因,导致父容器产生滚动距离
       // 导致的内容被遮挡的bug
       this.__BOX__.parentNode.scrollTop = 0