有一个模板需要用到滚动条事件。这个滚动条事件比较复杂。具体要求如下:
1、打开页面,滚动条向下滚动到不超过100px的位置时执行事件。
2、滚动条向下滚动到超过100px的位置时执行事件。
3、滚动条向上滚动到100px以内的位置时执行事件。
4、滚动条向上滚动到0位置时执行事件。
可能是要求比较少见,也可能是我知识不够,反正百度不到。只能自己写代码了。
var x=0,y=0,z=0,ds=null; $(window).scroll(function() { if(ds==null) ds = setInterval(gdsj, 100); }); function gdsj() {//滚动条事件 x = $(window).scrollTop(); //滚动条开始时的位置 if(z == x) { //当滚动停止时。滚动条当前位置X和上一次滚动条位置Z相同时,证明滚动条是停止状态 clearInterval(ds); //结束定时器 ds = null;//清理定时器 if((x-y)>0){ //x-y为正数是向下滚动 //向下滚动之后执行的代码 }else{ //x-y为负数就是向上 //向上滚动之后执行的代码 } y=x; //把当前位置赋值给Y,留给下一次对比是向上还是向下 }else{ //滚动没停时 z = x; //把位置赋值给Z,留给定时器下一次和滚动条X对比 } }
代码非常的好用,可以实现如下功能。
1、判断滚动条当前滚动方向,向上还是向下;
2、通过判断 x-y的值 可以得到本次滚动距离;