js全屏滚动切换

最近看到全屏滚动切换，就想自己写一个，但是发现一个小问题！那就是大神们写的都太简单了，不是太简了。小白的我无法看懂！

自己找了一些相关的知识，做了一个，只不过代码就，你懂的

html代码：

<div></div>
<div></div>
<div></div>
<div></div>

css代码：

*{margin: 0;padding: 0;}
body{
  overflow: hidden;    　　　　
}
div{
  height: 100vh;
}
div:nth-child(1){
  background: #2932E1;
}
div:nth-child(2){
  background: #6CE26C;
}
div:nth-child(3){
  background: #BF4938;
}
div:nth-child(4){
  background: yellow;
}

javascript代码：

var switch = true;　　　　　　　　　　　　                             //控制开关，让在运动之后才能再次检测鼠标滚动，不然就运动错误
document.DOMMouseScroll = function(){                              //浏览器兼容问题
  if(switch == true){                                              //检测完成，后让switch为false，不让再次检测鼠标滚动
    switch = false;
    test();
  }
}
document.onmousewheel = function(){　　　　　　　　　　　　　　　　　　　//浏览器兼容问题
  if(switch == true){
    switch = false;
    test();
  }
}

function motion(){
clearInterval(time2);
var totalHeight = document.documentElement.scrollHeight; //全文高度
var screenHeight = document.documentElement.clientHeight; //屏幕高度
var weltPosition = document.documentElement.scrollTop; //初始化的滚动条位置
var i = 1;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//滚动方向（1：向上，-1：向下）　
var targetPosition = weltPosition + screenHeight * i;　　　　　　　　　　　　　　　　　//目标滚动位置：滚动条位置 + 屏幕高度
var time2 = setInterval( function(){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
document.documentElement.scrollTop = weltPosition + i*40;　　　　　　　　　　　　　//滚动条的位置：初始化位置加上40速度　　　　　　　　
i++;
if(document.documentElement.scrollTop >= targetPosition){　　　　　　　
document.documentElement.scrollTop = targetPosition;
switch = true; //运动结束后清除定时器，并把switch设为true，能检测是否滚动鼠标
clearInterval(time2);
}　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
if(targetPosition == totalHeight){　　　　　　　　　　　　　　　　　　　　　　　　　　　//如果滚动条位置==目标位置,就让目标位置减去屏幕高度（滚动条位置等0显示的是第一屏，而目标位置等于屏幕高度，//所以最后一屏的目标为本市文本高度，但是显示的话，确实少一屏

document.documentElement.scrollTop = targetPosition - screenHeight;

　　　 switch = true;
clearInterval(time2);　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
}
},30)
}

这样子就完成了，但是代码明显很臃肿，技能方面的不足，请见谅！

更希望将来，自己能不断的完善，估计更多使用的是插件吧！

秒客网

js全屏滚动切换

相关文章