test123borisa

by Borisko

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.3/jquery.mousewheel.min.js"></script>
<div id="container1">


<div id="target"  >

<div class="emptyT"></div>
<div class="one actual">test1</div>
<div class="two">test2</div>
<div class="three ">test3</div>
<div class="four ">test4</div>
<div class="five">test5</div>
<div class="one">test6</div>
<div class="two">test7</div>
<div class="three">test8</div>
<div class="three">test9</div>
<div class="emptyB"></div>

</div>
</div>
<input type="text" value="value">

CSS

#container1{
  margin-top:50px;
    height: 170px;
    width: 500px;
    border: 1px solid green;
    overflow: hidden;
}

#target {
 width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 17px;
background-color:gray; 

position:relative;

}
.emptyT{width:80px; height:90px; }
.emptyB{width:80px; height:90px; }
.one{width:80px; height:30px; }
.two{ width:80px; height:30px; }
.three{ width:80px; height:30px; }
.four{ width:80px; height:30px; }
.five{ width:80px; height:30px; }

.actual{text-transform: uppercase; height:50px; background-color:purple;   }

JavaScript

function wheel($div, deltaY) {
    var step = 30 //pixel step
    var pos = $div.scrollTop();
    var nextPos = pos + (step * (-deltaY))
    console.log("DelatY: " + deltaY + ", Step: " + step + ", nextPos: " + nextPos);
    $div.scrollTop(nextPos);
}

$('#target').bind('mousewheel', function (event, delta, deltaX, deltaY) {
    if (delta > -2 && delta < 2) {
        wheel($(this), deltaY);
        event.preventDefault();
    }
    console.log(delta);
});




$(function () {


    // show hide subnav depending on scroll direction
    var position = $("#target").scrollTop();

    $("#target").scroll(function () {
        var scroll = $("#target").scrollTop();

//SCROLL DOWN
        if (scroll > position) {

//empty remove
$( "div.emptyB" ).removeClass( "actual" ); 

if($("div.actual:last").next().eq(0).is("div.emptyB")) {
    $( "div:emptyB:last" ).prev().eq(0).addClass( "actual" ); 
    $( "div.emptyB" ).removeClass( "actual" ); 

  
}
  else {$( "div.actual:last" ).next().eq(0).addClass( "actual" ); }  
    $( "div.actual:last" ).prev().eq(0).removeClass( "actual" ); 
    $("input").val("down");
       } 
        
        else {

 ///   $( "div.actual:last" ).prev().eq(0).addClass( "actual" ); 
 //   $( "div.actual:last" ).next().eq(0).removeClass( "actual" ); 
//   $( "div.empty:last" ).next().removeClass( "actual" ); 

            $("input").val("up");

        }

        position = scroll;
    });

});