Scroll per section with side Gui

Question

I would like to apply the following effect on a project, when the user uses the scroll, either up or down the scroll is made straight to the section below, needing a scroll roll and it goes to the next one section of the hierarchy:

what would be the best way to assign this action ? Jquery or JAVASCRIPT ? I’m a beginner in both.. You can give me directions?

EXAMPLE: HTML

<ol>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
</ol>
<section id="um">1</section>
<section id="dois">2</section>
<section id="tres">3</section>
<section id="quatro">4</section>

CSS

#um{height:600px;width:100%;background: #000;position:relative;}
#dois{height:600px;width:100%;background: #005;}
#tres{height:600px;width:100%;background: #010;}
#quatro{height:600px;width:100%;background: #015;}
ol {background: none repeat scroll 0 0 #c1c1c1;height: 200px;    padding: 8px;position: fixed;right: 0;width: 10px;z-index: 99;}
li{width:10px;height:10px;background:#fff;}

JS

?????????????????

Link to example Jsfiddle

http://jsfiddle.net/3L9tj5dy/

Answer 1

The first thing you need to do is make body fullscreen, so we can use heigth: 100%

body {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
}

Within this body, it takes a div as an anchor for the scrollbar

div.scrollbar {
    width: 100%;  
    height: 100%;
    max-height: 100%;
    overflow: auto;
}

Finally, the panels that will also be fullscreen.

.panel {
    width: 100%;
    height: 100%;
}

And then create a script that will monitor the movement of the Scroll:

var scrollbar = $("div.scrollbar");

var pageSize = scrollbar.innerHeight();
var currentPosition = 0;
var currentScrollTop = 0;

var onScroll = function(event) {
    var proporsalScrollTop = scrollbar.scrollTop();  
    //prevenir que a pagina retorne para a possicao inicial
    if (proporsalScrollTop == currentScrollTop) {
        return;
    }
    scrollbar.off("scroll");
    
    if (proporsalScrollTop > currentScrollTop) {
        //Scroll girado para baixo
        currentPosition = currentPosition + 1;        
    } else {
        //Scroll girado para cima
        currentPosition = currentPosition - 1;        
    }    
    
    currentScrollTop = pageSize * currentPosition
    //movimentar o scroll para o proximo painel.
    scrollbar.animate({
        scrollTop: currentScrollTop
    }, {
        duration: 500,
        complete: function () {
            scrollbar.on("scroll", onScroll);
        }
    });    
}

scrollbar.on("scroll", onScroll);

body {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
}

div.scrollbar  {
    width: 100%;  
    height: 100%;
    max-height: 100%;
    overflow: auto;
}

.panel {
    width: 100%;
    height: 100%;
    opacity: 0.4;
}

#panel-1 {
    background-color: green;
}

#panel-2 {
    background-color: yellow;
}

#panel-3 {
    background-color: blue;
}

#panel-4 {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollbar ">
    <section id="panel-1" class="panel">
    </section>
    <section id="panel-2" class="panel">
    </section>
    <section id="panel-3" class="panel">
    </section>
    <section id="panel-4" class="panel">
    </section>
</div>