欢迎来到 54818模板网!这是一个yzmcms的模板分享站。

js判断滚动条滚动方向及滚动距离

相关案例演示

        有一个模板需要用到滚动条事件。这个滚动条事件比较复杂。具体要求如下:

        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的值 可以得到本次滚动距离;

    作者:54818模板网 关注:492 时间:2022-11-26 16:03:10
    相关网站教程