JS触发滚动

滚动的话, 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来达到完美的动画渲染效果.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容