精简scroll组件

src/scroll/index.js

@@ -145,12 +145,6 @@ class Scroll extends Component {
   stamp = 0
 
   cache = {
-    width: 0, // 滚动组件的真实宽度(可视宽高)
-    height: 0, // 滚动组件的真实高度(可视宽高)
-    widthFixed: 0, // 滚动组件的宽度修正值
-    heightFixed: 0, // 滚动组件的高度修正值
-    scrollWidth: 0, // 滚动组件的滚动宽度
-    scrollHeight: 0, // 滚动组件的滚动高度
     xBar: 0, // 横轴长度
     yBar: 0, // 纵轴长度
     thumbX: 0, //横向条滚动距离
@@ -193,61 +187,17 @@ class Scroll extends Component {
     let height = this.offsetHeight
     let scrollWidth = this.scrollWidth
     let scrollHeight = this.scrollHeight
-    let clientWidth = this.$refs.box.clientWidth
-    let clientHeight = this.$refs.box.clientHeight
 
     let yBar = 50 //  滚动条的高度
     let xBar = 50 // 滚动条的宽度
-    let { widthFixed, heightFixed } = this.cache
-    let needFixed = false
-    let style = ''
 
     this.scrollLeft = 0
     this.scrollTop = 0
 
-    // 已经修正过宽度
-    if (widthFixed > 0) {
-      needFixed = scrollHeight === clientHeight
-      widthFixed = needFixed ? 0 : widthFixed
-    } else {
-      // 高度超出, 说明出现横向滚动条
-      if (scrollHeight > clientHeight) {
-        // width - clientWidth 等于滚动条的宽度, 下同
-        needFixed = true
-        widthFixed = width + (width - clientWidth)
-      }
-    }
-
-    if (heightFixed > 0) {
-      needFixed = scrollWidth === clientWidth
-      heightFixed = needFixed ? 0 : heightFixed
-    } else {
-      if (scrollWidth > clientWidth) {
-        needFixed = true
-        heightFixed = height + (height - clientHeight)
-      }
-    }
-
-    this.cache.widthFixed = widthFixed
-    this.cache.heightFixed = heightFixed
-
-    if (needFixed) {
-      if (widthFixed > 0) {
-        style += `width:${widthFixed}px;`
-      }
-
-      if (heightFixed > 0) {
-        style += `height:${heightFixed}px;`
-      }
-      this.$refs.box.style.cssText = style
-
-      // 需要修正视图容器, 修正完之后, 需要重新获取滚动宽高
-      scrollWidth = this.$refs.box.scrollWidth
-      scrollHeight = this.$refs.box.scrollHeight
-    }
     // 修正由于未知原因,导致父容器产生滚动距离
     // 导致的内容被遮挡的bug
-    this.$refs.box.parentNode.scrollTop = 0
+    // 重构后待观察, 暂时注释掉这行(2023/3/23)
+    // this.$refs.box.parentNode.scrollTop = 0
 
     yBar = (height * (height / scrollHeight)) >> 0
     xBar = (width * (width / scrollWidth)) >> 0
@@ -267,19 +217,26 @@ class Scroll extends Component {
       yBar = 0
     }
 
-    this.cache.height = height
-    this.cache.width = width
-    this.cache.scrollHeight = scrollHeight
-    this.cache.scrollWidth = scrollWidth
     this.cache.yBar = yBar
     this.cache.xBar = xBar
 
-    this.$refs.x.style.width = xBar + 'px'
-    this.$refs.y.style.height = yBar + 'px'
+    if (xBar > 0) {
+      this.$refs.x.parentNode.style.display = 'flex'
+      this.$refs.x.style.width = xBar + 'px'
+    } else {
+      this.$refs.x.parentNode.style.display = 'none'
+    }
+    if (yBar > 0) {
+      this.$refs.y.parentNode.style.display = 'flex'
+      this.$refs.y.style.height = yBar + 'px'
+    } else {
+      this.$refs.y.parentNode.style.display = 'none'
+    }
   }
 
   _fetchScrollX(moveX) {
-    var { scrollWidth, width, xBar } = this.cache
+    let { xBar } = this.cache
+    let { scrollWidth, offsetWidth: width } = this
 
     if (moveX < 0) {
       moveX = 0
@@ -293,7 +250,8 @@ class Scroll extends Component {
   }
 
   _fetchScrollY(moveY) {
-    var { scrollHeight, height, yBar } = this.cache
+    let { yBar } = this.cache
+    let { scrollHeight, offsetHeight: height } = this
 
     if (moveY < 0) {
       moveY = 0
@@ -307,10 +265,10 @@ class Scroll extends Component {
   }
 
   _fireReachEnd(action = 'reach-bottom') {
-    var delay = this.delay
-    var { scrollHeight, height } = this.cache
-    var top = this.$refs.box.scrollTop
-    var now = Date.now()
+    let delay = this.delay
+    let { scrollHeight, offsetHeight: height } = this
+    let top = this.scrollTop
+    let now = Date.now()
 
     if (now - this.stamp > delay) {
       if (action === 'reach-bottom') {
@@ -363,19 +321,16 @@ class Scroll extends Component {
       if (this._active) {
         return
       }
-      var axis = this.axis
-      var {
-        xBar,
-        yBar,
-        thumbX,
-        thumbY,
+      let { xBar, yBar, thumbX, thumbY } = this.cache
+      let {
+        axis,
         scrollHeight,
         scrollWidth,
-        width,
-        height
-      } = this.cache
-      var currTop = this.$refs.box.scrollTop
-      var currLeft = this.$refs.box.scrollLeft
+        offsetHeight: height,
+        offsetWidth: width,
+        scrollTop,
+        scrollLeft
+      } = this
 
       // x轴 y轴 都为0时, 不作任何处理
       if (xBar === 0 && yBar === 0) {
@@ -387,9 +342,10 @@ class Scroll extends Component {
         if (yBar) {
           // 修正滚动条的位置
           // 滚动比例 y 滚动条的可移动距离
-          let fixedY = (currTop / (scrollHeight - height)) * (height - yBar)
-
-          fixedY = fixedY >> 0
+          let fixedY = ~~(
+            (scrollTop / (scrollHeight - height)) *
+            (height - yBar)
+          )
 
           if (fixedY !== thumbY) {
             this.cache.thumbY = fixedY
@@ -406,9 +362,7 @@ class Scroll extends Component {
         if (xBar) {
           // 修正滚动条的位置
           // 滚动比例 x 滚动条的可移动距离
-          let fixedX = (currLeft / (scrollWidth - width)) * (width - xBar)
-
-          fixedX = fixedX >> 0
+          let fixedX = ~~((scrollLeft / (scrollWidth - width)) * (width - xBar))
 
           if (fixedX !== thumbX) {
             this.cache.thumbX = fixedX
@@ -451,8 +405,12 @@ class Scroll extends Component {
           <div class="content" ref="cont"><slot></slot></div>
         </div>
       </div>
-      <div class="is-horizontal"><span ref="x" class="thumb"></span></div>
-      <div class="is-vertical"><span ref="y" class="thumb"></span></div>
+      <div class="is-horizontal">
+        <span ref="x" class="thumb"></span>
+      </div>
+      <div class="is-vertical">
+        <span ref="y" class="thumb"></span>
+      </div>
     `
   }
 }