full page scroll

scroll.js

// need jquery.mousewheel
// TODO disable fullpage scroll while scrolled to no sections
var $sections = $('.section')
var $window = $(window)


var deltaY = 0
$window.on('mousewheel', function (evt) {
  evt.preventDefault()
  deltaY += evt.deltaY

  if (deltaY > 40) {
    deltaY = 0
    scroll(true)
  } else if (deltaY < -40) {
    deltaY = 0
    scroll()
  }
})

var startY
$window.on('touchstart', function (evt) {
  startY = evt.originalEvent.changedTouches[0].clientY
})
$window.on('touchend', function (evt) {
  var deltaY = evt.originalEvent.changedTouches[0].clientY - startY

  if (deltaY > 40) {
    scroll(true)
  } else if (deltaY < -40) {
    scroll()
  }
})


var scrolling = false
var first = false
var last = false
function scroll(backward) {
  if (scrolling
    || (first && backward)
    || (last && !backward)
  ) return

  var scrollTop = $window.scrollTop()
  var top, outOfRange = true
  var i, len = $sections.length
  if (backward) {
    // TODO
    // optimise searching algorithm
    // to split searching in log(n)
    for (i=len;i--;) {
      top = $sections.eq(i).offset().top
      if (top < scrollTop) {
        outOfRange = false
        break
      }
    }
  } else {
    for (i=0; i< len; i++) {
      top = $sections.eq(i).offset().top
      if (top > scrollTop) {
        outOfRange = false
        break
      }
    }
  }


  first = i === -1
  last = i === len

  if (outOfRange) return

  scrolling = true
  $('html, body').animate({
    scrollTop: top
  }, function () {
    scrolling = false
  })
}

scroll.scss

html, body, .section {
  height: 100%;
}
.section {
  height: 100vh;
}