优化滚动条抖动
parent
a6b0a2226c
commit
f6dc01c66d
|
@ -137,8 +137,10 @@ export default class Scroll {
|
||||||
}
|
}
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
width: 0, // 滚动组件的真实宽度
|
width: 0, // 滚动组件的真实宽度(可视宽高)
|
||||||
height: 0, // 滚动组件的真实高度
|
height: 0, // 滚动组件的真实高度(可视宽高)
|
||||||
|
widthFixed: 0, // 滚动组件的宽度修正值
|
||||||
|
heightFixed: 0, // 滚动组件的高度修正值
|
||||||
scrollWidth: 0, // 滚动组件的滚动宽度
|
scrollWidth: 0, // 滚动组件的滚动宽度
|
||||||
scrollHeight: 0, // 滚动组件的滚动高度
|
scrollHeight: 0, // 滚动组件的滚动高度
|
||||||
xBar: 0, // 横轴长度
|
xBar: 0, // 横轴长度
|
||||||
|
@ -247,29 +249,50 @@ export default class Scroll {
|
||||||
let scrollHeight = this.__BOX__.scrollHeight
|
let scrollHeight = this.__BOX__.scrollHeight
|
||||||
let yBar = 50 // 滚动条的高度
|
let yBar = 50 // 滚动条的高度
|
||||||
let xBar = 50 // 滚动条的宽度
|
let xBar = 50 // 滚动条的宽度
|
||||||
|
let { widthFixed, heightFixed } = this.state
|
||||||
|
let needFixed = false
|
||||||
let style = ''
|
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
|
this.__BOX__.style.cssText = style
|
||||||
|
|
||||||
|
// 需要修正视图容器, 修正完之后, 需要重新获取滚动宽高
|
||||||
scrollWidth = this.__BOX__.scrollWidth
|
scrollWidth = this.__BOX__.scrollWidth
|
||||||
scrollHeight = this.__BOX__.scrollHeight
|
scrollHeight = this.__BOX__.scrollHeight
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修正由于未知原因,导致父容器产生滚动距离
|
// 修正由于未知原因,导致父容器产生滚动距离
|
||||||
// 导致的内容被遮挡的bug
|
// 导致的内容被遮挡的bug
|
||||||
this.__BOX__.parentNode.scrollTop = 0
|
this.__BOX__.parentNode.scrollTop = 0
|
||||||
|
|
Reference in New Issue