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

修复滚动组件因为margin原因导致的计算不正确的bug

old
宇天 2021-05-08 13:38:54 +08:00
parent 666bed7aea
commit e20db59dcc
2 changed files with 17 additions and 16 deletions

View File

@ -209,9 +209,6 @@ export default class Markd {
} else { } else {
this.__BOX__.innerHTML = '' this.__BOX__.innerHTML = ''
} }
this.dispatchEvent(
new CustomEvent('ready', { bubbles: true, cancelable: true })
)
} }
clear() { clear() {

View File

@ -21,7 +21,6 @@
.wrapper { .wrapper {
overflow: auto; overflow: auto;
position: relative;
width: calc(100% + 18px); width: calc(100% + 18px);
height: calc(100% + 18px); height: calc(100% + 18px);
padding: 0 18px 18px 0; padding: 0 18px 18px 0;
@ -32,6 +31,7 @@
.is-horizontal, .is-horizontal,
.is-vertical { .is-vertical {
display: none;
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
display: flex; display: flex;
@ -238,16 +238,25 @@ export default class Scroll {
mounted() { mounted() {
// 初始化滚动条的位置和长度 // 初始化滚动条的位置和长度
this._initFn = $.catch(this, 'ready', ev => { this._initFn = ev => {
// 需要减去因为隐藏原生滚动条修正的18像素 // 需要减去因为隐藏原生滚动条修正的18像素
var width = this.__BOX__.clientWidth - 18 var width = this.offsetWidth
var height = this.__BOX__.clientHeight - 18 var height = this.offsetHeight
var scrollWidth = this.__BOX__.scrollWidth - 18 var scrollWidth = this.__BOX__.scrollWidth - 18
var scrollHeight = this.__BOX__.scrollHeight - 18 var scrollHeight = this.__BOX__.scrollHeight - 18
var yBar = (height * (height / scrollHeight)) >> 0 // 滚动条的高度 var yBar = (height * (height / scrollHeight)) >> 0 // 滚动条的高度
var xBar = (width * (width / scrollWidth)) >> 0 // 滚动条的宽度 var xBar = (width * (width / scrollWidth)) >> 0 // 滚动条的宽度
// 修复因为内容的margin导致滚动条取值不准确的bug
if (this.__BOX__.clientHeight - height !== 18) {
scrollHeight += 18 - (this.__BOX__.clientHeight - height)
yBar = (height * (height / scrollHeight)) >> 0
}
if (this.__BOX__.clientWidth - width !== 18) {
scrollWidth += 18 - (this.__BOX__.clientWidth - width)
xBar = (width * (width / scrollWidth)) >> 0
}
if (yBar < 50) { if (yBar < 50) {
yBar = 50 yBar = 50
} }
@ -272,7 +281,7 @@ export default class Scroll {
this.__X__.style.width = xBar + 'px' this.__X__.style.width = xBar + 'px'
this.__Y__.style.height = yBar + 'px' this.__Y__.style.height = yBar + 'px'
}) }
// 鼠标滚动事件 // 鼠标滚动事件
this._scrollFn = $.catch(this.__BOX__, 'scroll', ev => { this._scrollFn = $.catch(this.__BOX__, 'scroll', ev => {
@ -381,13 +390,8 @@ export default class Scroll {
$.bind(document, 'mouseup', mouseupFn) $.bind(document, 'mouseup', mouseupFn)
}) })
this.__observer = new MutationObserver(this._initFn) this.__observer = new ResizeObserver(this._initFn)
this.__observer.observe(this, { this.__observer.observe(this.__BOX__)
childList: true,
subtree: true,
attributeFilter: ['style']
})
$.nextTick(_ => this._initFn(new Event('mounted')))
} }
unmounted() { unmounted() {