修复滚动组件因为margin原因导致的计算不正确的bug
parent
666bed7aea
commit
e20db59dcc
|
@ -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() {
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
Reference in New Issue