diff --git a/src/scroll/index.js b/src/scroll/index.js index a8c13dd..038be57 100644 --- a/src/scroll/index.js +++ b/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 {