CSS-ページスライド画面スクロール原理_html/css_WEB-ITnose

今日の Web サイトでは、わかりやすくするために 1 ページのスライド スクリーン スクロールが多く使用されています。1 つは、全体の要素を連続して配置する方法です。 2 番目の方法は、すべてのサブ要素を現在のページに表示することです。単純な実装の最初のページと同じです。

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 を直接使用するか、クエリを使用できます。 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>

スクロール ホイールの時間制御とページ移動時のコードについて要素は不明、判断はできません、一般的なアイデアは変更ではありません、その他は参考用です~