Scroll to specific div when scroll down or scroll up

Question

On my site I have it so my scroll is locked:

body {
    overflow: hidden;
    height: 100%;
}

and on click of buttons it scrolls to a certain div, all the divs are beneath each other, I would like to know if it is possible to check if the user 'tries' to scroll down or up, while scroll is locked, so if they try scroll down with the mouse wheel, I want to know how to do this so I can scroll down or up to the next div.

Any help is appreciated.

Answer 1

This will tell you if they are scrolling down or up. Then you would have to deal with the transition by yourself.

But in any case, if you are looking for a more tested solution, I would encourage you to use an already existent plugin such as fullPage.js which will provide old browser compatibility, touch detection, a proper solution for trackpads and Apple laptops/Magic Mouse , resize support and a lot of other useful features.

addMouseWheelHandler();

function MouseWheelHandler(e) {
     // cross-browser wheel delta
     e = window.event || e;
     var value = e.wheelDelta || -e.deltaY || -e.detail;
     var delta = Math.max(-1, Math.min(1, value));


     //scrolling down?
     if (delta < 0) {
         console.log("scrolling down");
     }

     //scrolling up?
     else {
         console.log("scrolling up");
     }

     return false;
 }


 function addMouseWheelHandler() {
     if (document.addEventListener) {
         document.addEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
         document.addEventListener('wheel', MouseWheelHandler, false); //Firefox
     } else {
         document.attachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
     }
 }