滚动后的下一部分

Question

我需要根据视口滚动到页面的下一部分。当某人 1 滚动页面然后登陆下一部分时。我有 10 个部分要滚动，非常感谢您的帮助

.ttd-banner{
height:600px;
}

<section>
                       <div class="fluid-container">
                       <div class="row">
                         <div class="ttd-banner">
                   <img src="images/image-1.jpg">
                    <div class="title">
                              <h4>Heading</h4>
                             </div>
                           </div>
                         <div class="container mt-20">
                           <p>"Lorem ipsum dolor sit amet</p>
                           </div>
                           
                         </div>
             
             <div class="row">
                         <div class="ttd-banner">
                   <img src="images/image-1.jpg">
                    <div class="title">
                              <h4>Heading</h4>
                             </div>
                           </div>
                         <div class="container mt-20">
                           <p>"Lorem ipsum dolor sit amet</p>
                           </div>
                           
                         </div>
             
             <div class="row">
                         <div class="ttd-banner">
                   <img src="images/image-1.jpg">
                    <div class="title">
                              <h4>Heading</h4>
                             </div>
                           </div>
                         <div class="container mt-20">
                           <p>"Lorem ipsum dolor sit amet</p>
                           </div>
                           
                         </div>
             </div>
             </section>

Answer 1

我认为这就是你想要实现的目标。

(function() {
    "use strict";
    var pnls = document.querySelectorAll('.panel').length,
        scdir, hold = false;

    function _scrollY(obj) {
        var slength, plength, pan, step = 100,
            vh = window.innerHeight / 100,
            vmin = Math.min(window.innerHeight, window.innerWidth) / 100;
        if ((this !== undefined && this.id === 'container') || (obj !== undefined && obj.id === 'container')) {
            pan = this || obj;
            plength = parseInt(pan.offsetHeight / vh);
        }
        if (pan === undefined) {
            return;
        }
        plength = plength || parseInt(pan.offsetHeight / vmin);
        slength = parseInt(pan.style.transform.replace('translateY(', ''));
        if (scdir === 'up' && Math.abs(slength) < (plength - plength / pnls)) {
            slength = slength - step;
        } else if (scdir === 'down' && slength < 0) {
            slength = slength + step;
        } else if (scdir === 'top') {
            slength = 0;
        }
        if (hold === false) {
            hold = true;
            pan.style.transform = 'translateY(' + slength + 'vh)';
            setTimeout(function() {
                hold = false;
            }, 1000);
        }
    }

    function _swipe(obj) {
        var swdir,
            sX,
            sY,
            dX,
            dY,
            threshold = 100,
            /*[min distance traveled to be considered swipe]*/
            slack = 50,
            /*[max distance allowed at the same time in perpendicular direction]*/
            alT = 500,
            /*[max time allowed to travel that distance]*/
            elT, /*[elapsed time]*/
            stT; /*[start time]*/
        obj.addEventListener('touchstart', function(e) {
            var tchs = e.changedTouches[0];
            swdir = 'none';
            sX = tchs.pageX;
            sY = tchs.pageY;
            stT = new Date().getTime();
        }, false);

        obj.addEventListener('touchmove', function(e) {
            e.preventDefault();
        }, false);

        obj.addEventListener('touchend', function(e) {
            var tchs = e.changedTouches[0];
            dX = tchs.pageX - sX;
            dY = tchs.pageY - sY;
            elT = new Date().getTime() - stT;
            if (elT <= alT) {
                if (Math.abs(dX) >= threshold && Math.abs(dY) <= slack) {
                    swdir = (dX < 0) ? 'left' : 'right';
                } else if (Math.abs(dY) >= threshold && Math.abs(dX) <= slack) {
                    swdir = (dY < 0) ? 'up' : 'down';
                }
                if (obj.id === 'container') {
                    if (swdir === 'up') {
                        scdir = swdir;
                        _scrollY(obj);
                    } else if (swdir === 'down' && obj.style.transform !== 'translateY(0)') {
                        scdir = swdir;
                        _scrollY(obj);

                    }
                    e.stopPropagation();
                }
            }
        }, false);
    }

    var container = document.getElementById('container');
    container.style.transform = 'translateY(0)';
    container.addEventListener('wheel', function(e) {
        if (e.deltaY < 0) {
            scdir = 'down';
        }
        if (e.deltaY > 0) {
            scdir = 'up';
        }
        e.stopPropagation();
    });
    container.addEventListener('wheel', _scrollY);
    _swipe(container);
    
})();

* { 
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
}

body { 
    overflow: hidden;
}

.container {
    position: relative;
    transition: 1s ease-out;
    -webkit-transition: 1s ease-out;
}

.panel { 
    height: 100vh;
    width: 100%;
    position: relative;
    text-align: center;
    font: 20px/100vh 'Courier New', monospace;
}



    

<div class="container" id="container">
    <div class="panel">
        <p>01</p>
    </div>
    <div class="panel" style="background:lime;">
        <p>02</p>
    </div>
    <div class="panel" style="background:orange;">
        <p>03</p>
    </div>
    <div class="panel" style="background:aqua;">
        <p>04</p>
    </div>
    <div class="panel" style="background:darkgrey;">
        <p>05</p>
    </div>
    <div class="panel">
        <p>06</p>
    </div>
</div>

如果您不想在构建中编写或使用 Javascript 以获得整页滚动效果，那么您可以简单地使用 FullPage.js javascript 库。 Here is the Youtube tutorial link