This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化滚动条抖动

old
yutent 2022-01-20 16:34:44 +08:00
parent a6b0a2226c
commit f6dc01c66d
1 changed files with 37 additions and 14 deletions

View File

@ -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 (widthFixed > 0) {
needFixed = scrollHeight === clientHeight
widthFixed = needFixed ? 0 : widthFixed
} else {
// 高度超出, 说明出现横向滚动条
if (scrollHeight > clientHeight) {
// width - clientWidth 等于滚动条的宽度
style += `width:${width + (width - clientWidth)}px;`
// width - clientWidth 等于滚动条的宽度, 下同
needFixed = true
widthFixed = width + (width - clientWidth)
}
}
if (heightFixed > 0) {
needFixed = scrollWidth === clientWidth
heightFixed = needFixed ? 0 : heightFixed
} else {
if (scrollWidth > clientWidth) {
// height - clientHeight 等于滚动条的宽度
style += `height:${height + (height - clientHeight)}px;`
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