CSS-页面滑屏滚动原理_html/css_WEB-ITnose

现在的网站有的时候为了简洁就是很多的单页滑屏滚动介绍，主要呈现方式有两种，一种是整体的元素一直排列下去，假设有五个需要展示的全屏页面，那么高度是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;

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

    <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>

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