优化滚动条抖动
parent
a6b0a2226c
commit
f6dc01c66d
|
@ -137,8 +137,10 @@ export default class Scroll {
|
|||
}
|
||||
|
||||
state = {
|
||||
width: 0, // 滚动组件的真实宽度
|
||||
height: 0, // 滚动组件的真实高度
|
||||
width: 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 (scrollHeight > clientHeight) {
|
||||
// width - clientWidth 等于滚动条的宽度
|
||||
style += `width:${width + (width - clientWidth)}px;`
|
||||
// 已经修正过宽度
|
||||
if (widthFixed > 0) {
|
||||
needFixed = scrollHeight === clientHeight
|
||||
widthFixed = needFixed ? 0 : widthFixed
|
||||
} else {
|
||||
// 高度超出, 说明出现横向滚动条
|
||||
if (scrollHeight > clientHeight) {
|
||||
// width - clientWidth 等于滚动条的宽度, 下同
|
||||
needFixed = true
|
||||
widthFixed = width + (width - clientWidth)
|
||||
}
|
||||
}
|
||||
|
||||
if (scrollWidth > clientWidth) {
|
||||
// height - clientHeight 等于滚动条的宽度
|
||||
style += `height:${height + (height - clientHeight)}px;`
|
||||
if (heightFixed > 0) {
|
||||
needFixed = scrollWidth === clientWidth
|
||||
heightFixed = needFixed ? 0 : heightFixed
|
||||
} else {
|
||||
if (scrollWidth > clientWidth) {
|
||||
needFixed = true
|
||||
heightFixed = height + (height - clientHeight)
|
||||
}
|
||||
}
|
||||
|
||||
// 需要修正视图容器, 修正完之后, 需要重新获取滚动宽高
|
||||
if (style) {
|
||||
this.state.widthFixed = widthFixed
|
||||
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
|
||||
|
|
Reference in New Issue