js原生全屏滚动

html 代码:

<div class="box">
      <div class="wrap">
        <div class="page red">1</div>
        <div class="page yellow">2</div>
        <div class="page blue">3</div>
        <div class="page pink">4</div>
        <div class="page skyblue">5</div>
      </div>
</div>

css代码:

<style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .page {
        color: white;
        text-align: center;
        font-size: 200px;
      }
      .pink {
        background-color: pink;
      }
      .yellow {
        background-color: yellow;
      }
      .blue {
        background-color: blue;
      }
      .skyblue {
        background-color: skyblue;
      }
      .red {
        background-color: red;
      }
      body {
        overflow: hidden;
      }
      .box {
        overflow: hidden;
      }
      .wrap {
        position: absolute;
      }
</style>

js代码:

<script>
    var wrap = document.getElementsByClassName("wrap")[0];
    var pages = document.getElementsByClassName("page");
    for (var i = 0; i < pages.length; i++) {
        //给元素定义宽高
      pages[i].style.height = window.innerHeight + "px";
      pages[i].style.width = window.innerWidth + "px";
    }

    var index = 0;

    //鼠标的滚轮事件
    window.onmousewheel = function (ev) {
      ev = ev || window.event;
      console.log(wrap.offsetTop);
      if (wrap.offsetTop == -window.innerHeight * index) {//offsetTop为距离上方的位置,用来判断动画是否完成
        if (ev.wheelDelta > 0) {
          //页面向上滚动
          index < 1 ? (index = 0) : index--;
          wrap.style.top = -window.innerHeight * index + "px";
          wrap.style.transition = "all 1s ease";
        } else if (ev.wheelDelta < 0) {
          //页面向下滚动
          index > 3 ? (index = 4) : index++;
          wrap.style.top = -window.innerHeight * index + "px";
          wrap.style.transition = "all 1s ease";
        }
      }
    };
</script>

总结:
里面还有一个问题是第一次的滚动没有过度动画,不知道怎么解决