滚动的话, document级别的用window.scrollTo(), element内部的, 直接设置element.scrollTop就行, 这些都是直接过去的.
滚动动画:
ScrollTo(offsetTop, duration) {
let startingY = this.$refs.asv.scrollTop;
let diff = offsetTop - startingY;
let start;
const self = this;
const easing = BezierEasing(0.61, 0.29, 0.3, 0.97);
window.requestAnimationFrame(function step(timestamp) {
if (!start) start = timestamp;
var time = timestamp - start;
var percent = Math.min(time / duration, 1);
self.$refs.asv.scrollTop = startingY + diff * easing(percent);
if (time < duration) {
window.requestAnimationFrame(step);
}
})
}
通过贝塞尔曲线来达到缓入缓出的效果, 实现贝塞尔曲线的JS库BezierEasing(https://github.com/gre/bezier-easing)..) 通过AnimationFrame来达到完美的动画渲染效果.
