OnePageScroll

index.html

<div class="main">
    <section><div>1</div></section>
    <section><div>2</div></section>
    <section><div>3</div></section>
    <section><div>4</div></section>
  </div>
<div id="con"></div>

onepagescroll.markdown

OnePageScroll

wheel events, keyboard, animation delay to timeout

A Pen by james quinn on CodePen.

License.

script.js

var qs = function (css) { return document.querySelector(css); };
var qsa = function (css) { return document.querySelectorAll(css); };

function merge(a, b) {
    if ( b.length>0 ) for (var key in b) a[key] = b[key];
    return a;
  };


(function(skroll){
  'use strict';

  var defs = {
    allow: true,
    fwd: true,
    scrlPrev: 10,
    ppos: 0,
    current: 1,
    delay: 1000
  };
  //todo extend
  var Skroll = skroll || {};
  var _ = merge(defs, Skroll);
  _.main = qs('.main');
  _.total = _.main.children.length;
  _.wh = window.innerHeight;

  window.onresize = ()=>{
    _.wh = window.innerHeight;
    _.move();
  }

  var ccss = window.getComputedStyle(_.main);
  // _.delay = 1000;
  _.delay = parseFloat(ccss.transitionDuration) * 1000; //to ms
  var wheelEvt = "onwheel" in _.main ? "wheel" : //     Modern browsers support "wheel"
            _.main.onmousewheel !== undefined ? "mousewheel" : "DOMMouseScroll";

  _.move = ()=>{
    _.ppos = _.wh * ( 1 - _.current );
    _.main.style.transform = "translateY("+ _.ppos + "px)";
    _.allow = false;
    setTimeout(function(){
      _.allow = true;
      w('now you can');
    },_.delay)
  };
  _.nextSect = ()=>{
    if (_.current < _.total){
      _.current++;
      _.move();
    }
  };
  _.prevSect = ()=>{
    if (1 < _.current){
      _.current--;
      _.move();
    }
  };
  _.nav = qs('nav');

  [].forEach.call(qsa('a',_.nav),(x,i)=>{
    // w("process! "+ i + x.href);
      var n = i+1;
      x.onclick = function(e){
        e.preventDefault();
        _.current = n;
        _.move();
      }
  });

  document.onreadystatechange = function () {
    if (document.readyState == 'complete') {
      }
  }

  document.addEventListener( wheelEvt, function(e){
    var n = "";
    if (_.allow){
      if (e.deltaY > 0) {
        n = "updating";
        _.nextSect();
      }
      if (e.deltaY <= 0) {
        n = "updating";
        _.prevSect();
      }
    }
    w(" listener: "+e.deltaY+","+_.current+","+_.ppos+","+n);
    });

  document.addEventListener( 'keydown', function(e){
    var n = "";
    if (_.allow){
      if (e.keyCode == '40' || e.keyCode == '34' ) {
        n = "DOWNdating";
        _.nextSect();
      }
      if (e.keyCode == '38' || e.keyCode == '33' ) {
        n = "UPdating";
        _.prevSect();
      }
    }
    w(" listener: "+_.current+","+n);
    });
  /*JSON.stringify(  */

})()
	                  

	function w(txt){
	  con.innerHTML = txt;
	  console.log(txt);
	}

style.css

body {
  margin: 0;
  overflow:hidden;
  height: 100vh;
  width: 100%;
  cursor: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 32 32"><path d="M-10,6 0,-12 10,6Z" transform="translate(16, 16)" style="fill:none; stroke-opacity: .6; stroke-width:3; stroke:#fff"/></svg>') 17 17,pointer;
}
.main{
  position: relative;
  width: 100vw;
  transition: all 1s ease;
}
section {
  display: table;
 /* position: fixed;
  top:0; */
  width: 100vw;
  height: 100vh;
  text-align: center;
}

section div{
  display: table-cell;
  vertical-align: middle;
}
section:nth-child(1){
  background: #2c7
}

section:nth-child(2){
  background: #27c
}

section:nth-child(3){
  background: #c27
}

section:nth-child(4){
  background: #7c2
}


#con {
      position: fixed;
      bottom: 0px;
      right: 0px;
  }