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;
});