提个关于原生JS滚动执行动画的问题

来源：

谷白

2016-08-17

使用$(window).scroll去进行判断，当鼠标滚动到对应距离，执行动画，动画执行完毕

当鼠标再次滚动到同样的位置，如何让动画再次执行？

写回答

4回答

Lyn

2016-08-22

回复谷白：

1.) 模块化写法（非面向对象，因为没有足够的信息去构建「对象」）。

2.) 一些动画操作，这个是跟你的业务相关的。你的「滚动到200，画面依次从左往右」我猜不出来是什么东西。

记得调用 this.end() 是因为，你操作的动画肯定是延时的，结束之后给了个接口去调用。在动画的过程中，无法再次触发。

因为每次 scroll 事件都会触发。所以要有个标记，正在动画中的时候，不要触发。

谷白

if( $(window).height() + $(window).scrollTop() >= $(document).height() ){ } 我觉得这种写法，目前更能理解一点，

2016-08-23

共2条回复

Lyn

2016-08-17

第一行代码是没用的，我写多了，但是这个没法修改回复。

Lyn

谷白

1.) 模块化写法（非面向对象，因为没有足够的信息去构建「对象」）。 2.) 一些动画操作，这个是跟你的业务相关的。你的「滚动到200，画面依次从左往右」我猜不出来是什么东西。记得调用 this.end() 是因为，你操作的动画肯定是延时的，结束之后给了个接口去调用。在动画的过程中，无法再次触发。因为每次 scroll 事件都会触发。所以要有个标记，正在动画中的时候，不要触发。

2016-08-22

共2条回复

Lyn

2016-08-17

我尝试用伪代码来回答你的问题，不清楚的继续问我。

var isPlaying = false ;  // 是否动画正在播放中，默认为否。
// 执行动画的操作、相关状态 封装在一个模块里面
var Animation = {
    isPlaying : false,
    start : function(){
        
        if( this.isPlaying == true){ return false;}
        
        this.isPlaying = true;
        // ... 一些动画操作
        // ... 动画操作完了，记得调用  this.end();
    },
    end : function(){
        this.isPlaying = false;
    }
}
// 事件的侦听
$(window).on('scroll',function(){
    if(  this.scrollY > 100 && this.scrollY < 150 && Animation.isPlaying == false ){ 
        // 假设 从上到下 滚动了 100 就执行
        //     或者，一次执行完了，从下面滚动到 150 就执行
        //     当然必须是动画已经执行完成之后才应该做这事
        Animation.start();
    }
})