整屏滚动的讲解

Posted 2020-09-25

今天写的是整屏滚动的内容，最近奶糖饱受Vue的折磨，之前学习js的时候就没认真学，知道这一个月的后台学习下来我才知道js和jq是如此的可爱，好了闲话不扯进入今天的主体。

首先是我们的布局部分

//有了身体，我们还是得给他设置点样式属性，毕竟得有情怀

<style>

* {margin: 0; padding: 0;}
button {background: #3498db; color: #fff; font-size: 14px; text-align: center; width: 60px;    height: 60px; padding: 10px; border: none 0; cursor: pointer; position: fixed; right: 30px; bottom: 30px; display: none}
#wrap {    overflow: hidden; position: relative;}
#content {position: absolute; left: 0; top: 0; width: 100%;}
.colorBlock {height: 500px;    background: #c0dbff;}
#nav {position: fixed; left: 50%; margin-left: -70px; bottom: 30px;}
#nav a {background: #999; float: left; width: 10px; height: 10px; margin-left: 10px; cursor: pointer;}
#nav .now {    background: #3CF;}

</style>

//这里是我们的body部分

<div id="wrap">
  <div id="content">
    <div class="colorBlock">第一屏</div>
    <div class="colorBlock" style="background:#c0faff">第二屏</div>
    <div class="colorBlock" style="background:#d6ffc0">第三屏</div>
    <div class="colorBlock" style="background:#ffcfe3">第四屏</div>
  </div>
</div>
<div id="nav"><a index="0" class="now"></a><a index="1"></a><a index="2"></a><a index="3"></a></div>
<script>
/* 要求：返回顶部按钮开始是隐藏的，当页面向上滚动超出600px的时候，显示返回顶部按钮 */
var GLOBLF = GLOBLE||{};   //这里我们定义一个全局变量，用来存值

window.onload = function(){
　　resizeBlocks();

window.onresize = function(){
rsizeBlocks();
//调整页面大小的时候让整屏居中。

mainSlideGo();
if(mainSlideIndex){
　　　　if(GLOBLE.resizeTimer){
　　　　　　clearInterval(GLOBLE.resizeTimer);
}
GLOBLE.resizeTimr = setTimeout(function(){
　　　　mainSlideGoing = true;
　　　　mainSlideGo();
　　  },200)

　　}
 }
}//到这里的话我们的自动调整页面大小居中就OK啦
//现在我们需要鼠标点击时候切换

var aAtags = document.getElementByTagName("a");
for(var i=0;i<aAtags.length;i++){
　　aAtags[i].onclick = function(){
　　　　mainSlideIndex = this.getAttribute("index");
　　　　　mainSlideGo();
}
}
//  单页滚动开始
//鼠标滚动实践绑定及检测
var mainSlideIndex = 0;
var mainSlideGoing = false;
var mainSlideDelay = 0;
var mainSlideTimer = null;

var scrollFunc = function(e){
　　e = e || window .event;
　　　　if(e.wheelDelta){//判断浏览器IE，谷歌滑轮　　　　　　if(e.wheelDelta>0){ //当滑轮向上滚动时候

　　　　　　　　console.log("滑轮向上啦！！")
　　　　　　　maiSlideUp();
}
　　　　if(e.wheelDelta<0){//滑轮向下滚动时
　　　　　　console.log（“滑轮向下了”）
　　　　　　　　maiSlideDown()
}
}　　else if(e.detail){//Firefox滑轮事件
　　　　if（e.detail>0）{//当滑轮向下滚动时
　　　　　　console.log（“滑轮向下了”）
　　　　　　　　mainSlideDown()
}
　　if(e.detail<0){//滑轮向上滚动
　　　　console.log（“向上滚动了”）
　　　　mainSlideUp
}　　

}

}
//现在我们给页面绑定滑轮滚动事件
if(document.addEventListener){firefox
　　document.addEventListener("DOMMouseScroll",scrollFunc,false);
}
//滚动滑轮触发scrollFunc方法 //IE 谷歌
window.onmousewheel = document.onmousewheel = scrollFunc;
//向下滚动
function mainSlideDown(){
　　if(mainSlideDelay<1){//这个判断用于第一次检测鼠标滚动，让第二次鼠标滚动的时候在执行页面动画效果
　　　　　　clearInterval(mainSlideTimer);
　　　　　　　　mainSlideTimer = setTimeout(unction(){
　　　　　　　　　　mainSlideDelay++
},100)
　　　　
}else if(!mainSlideGoing){
　　mainSlideGoing　 = true;
　　mainSlideIndex++;
　　if(mainSlideIndex>3){
　　　　maindeIndex = 3;
}　
　　　　mainSlideGo();
}
}
//向上滚动
functuin mainSlideUp(){
　　if(mainSlideDelay<1){
　　　　clearInterval(mainSlideTimer);
　　　　mainSlideTimer = setTimeout(functin(){
　　　　　　mainSlideDelay++

},100)
}else if(!mainSlidGoing){
　　mainSlideGoing = true;
　　mainSlideIndex--;
　　if(mainSlideIndex<0){
　　　　maiSlideIndex = 0
}
　　mainSlideGo();
}
}

//滚动方法
function mainSlideGo(){
//用于设置滚动方向
var direction = 1;

var oDiv = document.getElementById("content");
var taget = document.getElementById("wrap").offstHeight*mainSlideIndex;
var distance = Math.abs(target + oDiv.offsetTop);
//判断滚动方法，并设置相应的滚动方向是+还是-
　　if(target + oDiv.offsetTop <0){
　　　　direction = -1;
}
//设置滚动速度
var spead = distance/40;
var remainDis = distance;
//运动定时器
var goTimer = setInterval(function(){
oDiv.style.top = oDiv.offsetTop - spead*direction + "px";
remainDis -= spead;
　　if(remainDis<=40){
　　　　clearInterval(goTimer);
　　　　oDiv.style.top = -target +"px";
　　　　mainSlideGoing = false;
　　　　mainSlideDelay = 0;
　　　　document.getElementsByClassName("now")[0].className = "";
　　　　docment,getElementsByTagName("a")[mainSlideIndex].className = "now"
,},8)

    /*单页滚动结束*/
   
   //调整页面高度的方法
   function resizeBlocks(){
      var screenh = document.documentElement.clientHeight || document.body.clientHeight;
      
      aBlock = document.getElementsByClassName("colorBlock");

      for(var i=0; i<aBlock.length; i++){
         
         aBlock[i].style.height = screenh + "px";
      }
      document.getElementById("wrap").style.height = screenh + "px";
      
   }
   
}

</script>