滑动一整屏

需求:用户通过鼠标滚轮滑动的时候一整屏进行翻页。

参考网站效果

微派网络

实现思路:

1.首先我们需获取可视区域的高度

document.documentElement.clientHeight;

2.根据动态设置top属性即可进行翻页。

3.需判断上滑还是下滑

根据onmousewheel滚轮事件即可判断,开始时间为当前时间,结束时间为事件结束以后当时间,若是差值为负数到一定区间,即可判断为向上滑动,否则为向下滑动。

注意点:

我们需通过onresize缩放来监听当前的可视窗口的高度。并且每次把当前窗口的值修改到显示区域,同时top值也需进行修改。

比如我们在第二屏幕的时候,每次改变的时候我会动态生成一个数组,并且滑动的时候,是会改变其页数的,因此我可以根据页数和高度数组进而来改变其top值。

代码展示


  

  

  

你可能感兴趣的:(前端,javascript)