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 test(){
  var e = e || event;　　　　　　　　　　　　　　　　　　　　　　　　　　　　
  if(e.wheelDelta > 0 || e.detail < 0 ){                             //检测鼠标滚动方向
    motion2();
  }
  if(e.wheelDelta < 0 || e.detail > 0 ){
    motion();
  }
}

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

function motion2(){
  clearInterval(time);
  var totalHeight = document.documentElement.scrollHeight; //全文高度
  var screenHeight = document.documentElement.clientHeight; //屏幕高度
  var weltPosition = document.documentElement.scrollTop; //滚动条位置
  var i = -1;
  var targetPosition = weltPosition + screenHeight*i;
  var time = setInterval( function(){
    document.documentElement.scrollTop = weltPosition + i*40;
    i--;
    if(document.documentElement.scrollTop <= targetPosition){
      document.documentElement.scrollTop = targetPosition;
      switch = true;
      clearInterval(time);
    }
    if(document.documentElement.scrollTop <= 0 ){                     
      document.documentElement.scrollTop = 0;
      switch = true;
      clearInterval(time);
    }
  },30)
}

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

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

转载于:https://www.cnblogs.com/ash-sky/p/9602819.html