CSS-页面滑屏滚动原理

现在的网站有的时候为了简洁就是很多的单页滑屏滚动介绍，主要呈现方式有两种，一种是整体的元素一直排列下去，假设有五个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行Y轴定位，也可以通过margin-top实现，第二种就是所有的子元素和页面一样，都显示在当前页面，简单的实现第一种页面。

Html代码:

<div class="container">
       <div class="wrapper">
           <div class="page page0 active" data-page="0">
               第一页 博客园-FlyElephant
           </div>
           <div class="page page1" data-page="1">
               第二页
           </div>
           <div class="page page2" data-page="2">
               第三页
           </div>
           <div class="page page3" data-page="3">
               第四页
           </div>
       </div>
   </div>

　页面样式:

html,
   body {
       height: 100%;
       padding: 0px;
       margin: 0px;
   }
    
   .container {
       height: 100%;
       overflow: hidden;
   }
    
   .wrapper {
       height: 100%;
       touch-action: none;
       transition: all 1000ms ease;
   }
    
   .page {
       height: 100%;
       width: 100%;
   }
    
   .page0 {
       background: #551A8B;
   }
    
   .page1 {
       background: #FF8247;
   }
    
   .page2 {
       background: #CD919E;
   }
    
   .page3 {
       background: #98FB98;
   }

鼠标滑动控制代码，如果需要获取鼠标的滚轮事件可以直接通过JavaScript，也可以通过query.mousewheel.min.js插件来写,原生态的JS:

/** This is high-level function.
 * It must react to delta being more/less than zero.
 */
function handle(delta) {
        if (delta < 0)
        …;
        else
        …;
}
 
/** Event handler for mouse wheel event.
 */
function wheel(event){
        var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
                handle(delta);
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
                event.preventDefault();
    event.returnValue = false;
}
 
/** Initialization code. 
 * If you use your own event management code, change it as required.
 */
if (window.addEventListener)
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;

通过jQuery插件控制控制滚动的代码:

<script type="text/javascript">
   $(function() {
       $('.container').on('mousewheel', function(event) {
           //mac自然状态向上是-1
           //window向上滑动时候是1 向下-1
           console.log(event.deltaX, event.deltaY, event.deltaFactor);
           var currentPage = parseInt($('.active').attr('data-page'));
           if (event.deltaY > 0) {
               var prevpage = currentPage - 1;
               if (prevpage >=0) {
                   $('.page' + prevpage).addClass('active');
                   $('.page' + currentPage).removeClass('active');
                   $('.wrapper').css({
                       'transform': 'translate(0,' + (prevpage * -100) + '%)'
                   });
               }
           } else {
               var nextpage = currentPage + 1;
               if (nextpage < 4) {
                   $('.page' + nextpage).addClass('active');
                   $('.page' + currentPage).removeClass('active');
                   $('.wrapper').css({
                       'transform': 'translate(0,' + (nextpage * -100) + '%)'
                   });
               }
           }
 
       });
   });
   </script>