转载

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>

关于滚轮的时间的控制，以及不确定页面元素时候的代码没有给出判断，大体思路不变，其他的仅供参考~

正文到此结束