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

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

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

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

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