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
宇天 2020-07-07 10:56:15 +08:00
parent 5b656a1219
commit ae1469333f
2 changed files with 20 additions and 5 deletions

View File

@ -11,10 +11,7 @@
"type": "git", "type": "git",
"url": "git+https://github.com/yutent/doui.git" "url": "git+https://github.com/yutent/doui.git"
}, },
"keywords": [ "keywords": ["doui", "Anot"],
"doui",
"Anot"
],
"author": "yutent", "author": "yutent",
"license": "MIT", "license": "MIT",
"dependencies": {}, "dependencies": {},

View File

@ -255,11 +255,16 @@ export default class Scroll {
if (!xw && !yh) { if (!xw && !yh) {
return return
} }
// ev.preventDefault()
//校正兼容苹果鼠标在 chrome和FF下滚动的精度 //校正兼容苹果鼠标在 chrome和FF下滚动的精度
var deltaX var deltaX
var deltaY var deltaY
var now = Date.now()
if (!this.stamp || now - this.stamp > 1000) {
this.stamp = now
this.times = 1
}
if (IS_FF) { if (IS_FF) {
// 区分是触摸板还是普通鼠标 // 区分是触摸板还是普通鼠标
@ -277,6 +282,16 @@ export default class Scroll {
} }
} }
if (now - this.stamp < 20) {
this.times += 0.05
if (this.times > 3) {
this.times = 3
}
}
deltaX *= this.times
deltaY *= this.times
// //
if (this.props.axis !== 'x') { if (this.props.axis !== 'x') {
this.__BOX__.scrollTop += deltaY this.__BOX__.scrollTop += deltaY
@ -285,6 +300,7 @@ export default class Scroll {
// 修正滚动条的位置 // 修正滚动条的位置
// 滚动比例 y 滚动条的可移动距离 // 滚动比例 y 滚动条的可移动距离
var fixedY = (this.__BOX__.scrollTop / (sh - oh)) * (oh - yh) var fixedY = (this.__BOX__.scrollTop / (sh - oh)) * (oh - yh)
fixedY = fixedY >> 0 fixedY = fixedY >> 0
if ( if (
@ -309,6 +325,7 @@ export default class Scroll {
// 修正滚动条的位置 // 修正滚动条的位置
// 滚动比例 x 滚动条的可移动距离 // 滚动比例 x 滚动条的可移动距离
var fixedX = (this.__BOX__.scrollLeft / (sw - ow)) * (ow - xw) var fixedX = (this.__BOX__.scrollLeft / (sw - ow)) * (ow - xw)
fixedX = fixedX >> 0 fixedX = fixedX >> 0
if ( if (
@ -326,6 +343,7 @@ export default class Scroll {
} }
} }
this.stamp = now
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('scroll', { new CustomEvent('scroll', {
detail: { x: this.props.thumbX, y: this.props.thumbY } detail: { x: this.props.thumbX, y: this.props.thumbY }