类似【美篇】首页，整屏滚动的效果，网页全屏滚动切换示例

<div class='cont'>
    <div class='box'>
       <div class='div1'>鹅</div>
       <div class='div2'>你</div>
       <div class='div3'>太</div>
       <div class='div4'>美</div>
    </div>
</div>
<style>
.cont{
 width:100%;
 height:100%;
 overflow:hidden;
}
.box{
 position:absolute;
 top:0;
 height:500%;
 width:100%;
 transition:all .3s ease;
}
</style>

思路就是

通过 document.body.clientHeight 获取屏幕高度，监听鼠标滚动，每次触发滚动，就修改 .box 的top值为 区块索引值 * 屏幕高度。