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

Question

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

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

Answer 1

Lyn 2016-08-22 10:04:56

回复 谷白：

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

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

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

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

• 提问者 谷白 #1

  有没有纯面向过程的写法？

• 提问者 谷白 #2

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

Answer 2

Lyn 2016-08-17 15:01:45

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

• 提问者 谷白 #1

  1：这种写法属于什么写法？
  2：        // ... 一些动画操作
          // ... 动画操作完了，记得调用  this.end();
  
  能写个实列吗？滚动到200，画面依次从左往右，

• Lyn 回复 提问者 谷白 #2

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

Answer 3

Lyn 2016-08-17 15:00:58

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

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();
    }
})

Answer 4

劫1 2016-08-17 15:08:23

if( $(window).height() + $(window).scrollTop() >= $(document).height() ){

}

屏幕高度加上当前scroll的top  如果大于等于文档的高度，执行做的事情

• 劫1 #1

  大概就这个思路