Next section after scroll-CodePudding

I need to scroll to the next section on the page based on the viewport. when someone 1 scroll the page then land on next section. I have 10 sections to scroll, please help much appreciated

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

CodePudding user response：

I think this is what you trying to achieve.

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

And if you don't want write or use Javascript in your build for full page scroll effect, So you can simply use FullPage.js javascript library. Here is the Youtube tutorial link