github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #17057 from cnlon/optimize/scrolling-of-backtop 

BackTop: use requestAnimationFrame and cubic bezier for scrolling
pull/17283/head
wurong 2019-09-02 11:55:34 +08:00 committed by GitHub
parent c9f4e8fd0d d961d9d5c6
commit b6b9aaecce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/backtop/src/main.vue
View File

@ -18,6 +18,11 @@
<script>
import throttle from 'throttle-debounce/throttle';
const cubic = value => Math.pow(value, 3);
const easeInOutCubic = value => value < 0.5
? cubic(value * 2) / 2
: 1 - cubic((1 - value) * 2) / 2;
export default {
name: 'ElBacktop',
@ -81,16 +86,20 @@ export default {
this.$emit('click', e);
},
scrollToTop() {
let el = this.el;
let step = 0;
let interval = setInterval(() => {
if (el.scrollTop <= 0) {
clearInterval(interval);
return;
const el = this.el;
const beginTime = Date.now();
const beginValue = el.scrollTop;
const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
const frameFunc = () => {
const progress = (Date.now() - beginTime) / 500;
if (progress < 1) {
el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
rAF(frameFunc);
} else {
el.scrollTop = 0;
}
step += 10;
el.scrollTop -= step;
}, 20);
};
rAF(frameFunc);
}
},