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>

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