Need help to scroll when mouse wheel is used. Scroll Up or Down as per mouse action.
I'm trying to create moveDown() & moveUp() function, to scroll according mouse wheel action
On scroll, remove class of current div :- .active and add class :- .active to scrolled div(div in viewport), by default first div has class .active.

Following is my code structure.

HTML

<div class="wrap">
    <div class="pane active"><h1>pane_1</h1></div>
    <div class="pane"><h1>pane_2</h1></div>
    <div class="pane"><h1>pane_3</h1></div>                 
    <div class="pane"><h1>pane_4</h1></div>
    <div class="pane"><h1>pane_5</h1></div>
    <div class="pane"><h1>pane_6</h1></div>
</div>

CSS

.wrap {
    height: 100vh;
    width: 100vw;
    position: absolute;
    display: inline-block;
    margin: 0 auto; 
    top: 0;
    left: 0;
    background: #D88C2A;
    overflow:hidden
}
.pane {
    height: 100vh;
    width: 100vw;
    position: relative;
    margin: 0 auto; 
}

Script

$(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) {
          event.preventDefault();
           var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;

});

Recommended Answers

All 2 Replies