前端开发scroll事件

Question

我在浏览器scroll事件中不断改变一个元素的top值，元素top值的改变为什么不流畅，一跳一跳的，怎么才能解决

Answer 1

推荐使用基于jQuery的animate动画函数以及scrollTop方法，平稳过渡效果，时间可控制，封装代码如下：

/**
 * 自动页面滚动至某元素
 * @param {Object} obj 主对象
 * @param {Number} time 页面滚动至某元素所需时间
 * @example autoscroll($('#goTop'),100)
 */ 
function autoscroll(obj,time){
    var $this = $(obj);
    if(!time) time = 500;
    var $top = $this.offset().top;
    $('html,body').animate({
        scrollTop:$top
    },time);
}

Answer 2

将滚动回调函数中使用到的对象之类的，除非需要根据条件计算的，其他的通通先用变量缓存起来。这样在某些情况下是可以实现一定程度的优化的。

Answer 3

不要直接操作元素的值，最好用变量代替元素值的变化，前段性能优化中就有尽量减少dom元素操作