优化滚动组件
parent
43b6faecbc
commit
0f9f6afc4b
|
@ -163,13 +163,7 @@ export default class Scroll {
|
||||||
set scrollTop(n) {
|
set scrollTop(n) {
|
||||||
n = +n
|
n = +n
|
||||||
if (n === n) {
|
if (n === n) {
|
||||||
// var { scrollY, height, yh } = this.props
|
|
||||||
|
|
||||||
this.__BOX__.scrollTop = n
|
this.__BOX__.scrollTop = n
|
||||||
// var fixedY = (this.__BOX__.scrollTop / (scrollY - height)) * (height - yh)
|
|
||||||
// this.props.thumbY = fixedY
|
|
||||||
|
|
||||||
// this.__Y__.style.transform = `translateY(${fixedY}px)`
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -180,13 +174,7 @@ export default class Scroll {
|
||||||
set scrollLeft(n) {
|
set scrollLeft(n) {
|
||||||
n = +n
|
n = +n
|
||||||
if (n === n) {
|
if (n === n) {
|
||||||
// var { scrollX, width, xw } = this.props
|
|
||||||
|
|
||||||
this.__BOX__.scrollLeft = n
|
this.__BOX__.scrollLeft = n
|
||||||
// var fixedX = (this.__BOX__.scrollLeft / (scrollX - width)) * (width - xw)
|
|
||||||
// this.props.thumbX = fixedX
|
|
||||||
|
|
||||||
// this.__X__.style.transform = `translateX(${fixedX}px)`
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -199,28 +187,29 @@ export default class Scroll {
|
||||||
}
|
}
|
||||||
|
|
||||||
_fetchScrollX(moveX) {
|
_fetchScrollX(moveX) {
|
||||||
var { scrollX, width, xw } = this.props
|
var { scrollX, width, xBar } = this.state
|
||||||
|
|
||||||
if (moveX < 0) {
|
if (moveX < 0) {
|
||||||
moveX = 0
|
moveX = 0
|
||||||
} else if (moveX > width - xw) {
|
} else if (moveX > width - xBar) {
|
||||||
moveX = width - xw
|
moveX = width - xBar
|
||||||
}
|
}
|
||||||
this.__BOX__.scrollLeft = (scrollX - width) * (moveX / (width - xw))
|
this.__BOX__.scrollLeft = moveX
|
||||||
this.__X__.style.transform = `translateX(${moveX}px)`
|
this.__X__.style.transform = `translateX(${moveX}px)`
|
||||||
|
|
||||||
return moveX
|
return moveX
|
||||||
}
|
}
|
||||||
|
|
||||||
_fetchScrollY(moveY) {
|
_fetchScrollY(moveY) {
|
||||||
var { scrollY, height, yh } = this.props
|
var { scrollY, height, yBar } = this.state
|
||||||
|
|
||||||
if (moveY < 0) {
|
if (moveY < 0) {
|
||||||
moveY = 0
|
moveY = 0
|
||||||
} else if (moveY > height - yh) {
|
} else if (moveY > height - yBar) {
|
||||||
moveY = height - yh
|
moveY = height - yBar
|
||||||
}
|
}
|
||||||
this.__BOX__.scrollTop = (scrollY - height) * (moveY / (height - yh))
|
|
||||||
|
this.__BOX__.scrollTop = moveY
|
||||||
this.__Y__.style.transform = `translateY(${moveY}px)`
|
this.__Y__.style.transform = `translateY(${moveY}px)`
|
||||||
return moveY
|
return moveY
|
||||||
}
|
}
|
||||||
|
@ -288,9 +277,9 @@ export default class Scroll {
|
||||||
})
|
})
|
||||||
|
|
||||||
// 鼠标滚动事件
|
// 鼠标滚动事件
|
||||||
this._wheelFn = $.bind(this.__BOX__, 'scroll', ev => {
|
this._scrollFn = $.bind(this.__BOX__, 'scroll', ev => {
|
||||||
// 禁用状态, 不允许滚动
|
// 拖拽时忽略滚动事件
|
||||||
if (this.disabled) {
|
if (this._active) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
var { axis } = this.props
|
var { axis } = this.props
|
||||||
|
@ -306,7 +295,6 @@ export default class Scroll {
|
||||||
} = this.state
|
} = this.state
|
||||||
var currTop = this.__BOX__.scrollTop
|
var currTop = this.__BOX__.scrollTop
|
||||||
var currLeft = this.__BOX__.scrollLeft
|
var currLeft = this.__BOX__.scrollLeft
|
||||||
var now = Date.now()
|
|
||||||
|
|
||||||
// x轴 y轴 都为0时, 不作任何处理
|
// x轴 y轴 都为0时, 不作任何处理
|
||||||
if (xBar === 0 && yBar === 0) {
|
if (xBar === 0 && yBar === 0) {
|
||||||
|
@ -352,22 +340,20 @@ export default class Scroll {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.stamp = now
|
|
||||||
this.dispatchEvent(new CustomEvent('scroll'))
|
this.dispatchEvent(new CustomEvent('scroll'))
|
||||||
})
|
})
|
||||||
|
|
||||||
/* var startX,
|
let startX,
|
||||||
startY,
|
startY,
|
||||||
moveX,
|
moveX,
|
||||||
moveY,
|
moveY,
|
||||||
mousemoveFn = ev => {
|
mousemoveFn = ev => {
|
||||||
var { thumbY, thumbX } = this.props
|
let { thumbY, thumbX } = this.state
|
||||||
if (startX !== null) {
|
if (startX !== null) {
|
||||||
moveX = this._fetchScrollX(thumbX + ev.pageX - startX)
|
moveX = this._fetchScrollX(thumbX + ev.pageX - startX)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (startY !== null) {
|
if (startY !== null) {
|
||||||
this._active = true
|
|
||||||
moveY = this._fetchScrollY(thumbY + ev.pageY - startY)
|
moveY = this._fetchScrollY(thumbY + ev.pageY - startY)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -377,40 +363,30 @@ export default class Scroll {
|
||||||
}
|
}
|
||||||
startX = null
|
startX = null
|
||||||
startY = null
|
startY = null
|
||||||
this.props.thumbX = moveX
|
this.state.thumbX = moveX || 0
|
||||||
this.props.thumbY = moveY
|
this.state.thumbY = moveY || 0
|
||||||
|
delete this._active
|
||||||
$.unbind(document, 'mousemove', mousemoveFn)
|
$.unbind(document, 'mousemove', mousemoveFn)
|
||||||
$.unbind(document, 'mouseup', mouseupFn)
|
$.unbind(document, 'mouseup', mouseupFn)
|
||||||
}
|
}
|
||||||
|
|
||||||
$.bind(this.__Y__, 'mousedown', ev => {
|
$.bind(this.__Y__, 'mousedown', ev => {
|
||||||
startY = ev.pageY
|
startY = ev.pageY
|
||||||
if (!this.props.thumbY) {
|
|
||||||
this.props.thumbY = 0
|
this._active = true
|
||||||
}
|
|
||||||
// 禁用状态, 不允许滚动
|
|
||||||
if (this.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
$.bind(document, 'mousemove', mousemoveFn)
|
$.bind(document, 'mousemove', mousemoveFn)
|
||||||
$.bind(document, 'mouseup', mouseupFn)
|
$.bind(document, 'mouseup', mouseupFn)
|
||||||
})
|
})
|
||||||
|
|
||||||
$.bind(this.__X__, 'mousedown', ev => {
|
$.bind(this.__X__, 'mousedown', ev => {
|
||||||
startX = ev.pageX
|
startX = ev.pageX
|
||||||
if (!this.props.thumbX) {
|
this._active = true
|
||||||
this.props.thumbX = 0
|
|
||||||
}
|
|
||||||
// 禁用状态, 不允许滚动
|
|
||||||
if (this.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
$.bind(document, 'mousemove', mousemoveFn)
|
$.bind(document, 'mousemove', mousemoveFn)
|
||||||
$.bind(document, 'mouseup', mouseupFn)
|
$.bind(document, 'mouseup', mouseupFn)
|
||||||
})
|
})
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
// this.__observer = new MutationObserver(this._initFn)
|
// this.__observer = new MutationObserver(this._initFn)
|
||||||
// this.__observer.observe(this, {
|
// this.__observer.observe(this, {
|
||||||
// childList: true,
|
// childList: true,
|
||||||
|
@ -422,9 +398,8 @@ export default class Scroll {
|
||||||
unmount() {
|
unmount() {
|
||||||
// this.__observer.disconnect()
|
// this.__observer.disconnect()
|
||||||
|
|
||||||
$.unbind(this.__BOX__, 'mouseenter', this._initFn)
|
$.unbind(this, 'mouseenter', this._initFn)
|
||||||
$.unbind(this.__BOX__, 'mouseleave', this._inactiveFn)
|
$.unbind(this.__BOX__, 'scroll', this._scrollFn)
|
||||||
$.unbind(this.__BOX__, 'wheel', this._wheelFn)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
watch() {
|
watch() {
|
||||||
|
|
Reference in New Issue