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>

　　關於滾輪的時間的控制，以及不確定頁面元素時候的代碼沒有給出判斷，大體思路不變，其他的僅供參考~