test123borisa

by Borisko

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.3/jquery.mousewheel.min.js"></script>
<!-- THIS IS LATEST WORKING -->

<div id="arrow"></div>
<div id="container1">


<div id="target"  >

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

</div>
</div>

Delta Y: <input type="text" value="delta6" id="delta6"><br />
POS  <input type="text" value="delta" id="delta1">
FIXPOS: <input type="text" value="delta" id="delta5">
CHECKCODE: <input type="text" value="delta" id="delta7">

CSS

#arrow{
  position:absolute;
  top:112px;
  left:502px;
  height:50px;
  width:10px;
  background-color:red;
  }

#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:500px; height:60px; }
.emptyB{width:500px; height:90px;  }
.one{width:500px; height:30px; text-align:center; }

//.actual{width:500px; height:30px;background-color:purple;   }
.actual{text-transform: uppercase; height:50px; background-color:purple;    color:white; font-size:32px;

-webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

JavaScript

function wheel($div, deltaY) {
    var step = 30; //pixel step
    var pos = $div.scrollTop();
    
if (deltaY <= -1) {deltaY = -1;}
if (deltaY >= 1) {deltaY =  1;}
    
    var nextPos = pos + (step * (-deltaY));
    var fixpos = Math.floor( nextPos / 30.0 ) * 30;

    

  if(fixpos <= 0)  {fixpos = -30;}
  if(fixpos > 240) {fixpos = 240;}
  
  console.log("DelatY: " + deltaY + ", Step: " + step + ", nextPos: " + nextPos + ", FIXED: " + fixpos);
 
 $div.scrollTop(fixpos);
// $div.delay(500).animate({scrollTop:(fixpos)});
 
 $("#delta1").val(pos);
 $("#delta5").val(fixpos);



   




 
}

$("#target").bind("mousewheel", function (event, delta, deltaX, deltaY) {

//tu treba limitovat deltu

if (deltaY <= -1) {deltaY = -1;}
if (deltaY >=  1) {deltaY =  1;}
$("#delta6").val(deltaY);
//    if (delta > -2 && delta < 2) {

if (deltaY == -1) 
{
	event.preventDefault();
	$("#delta7").val("tu som 1");
  wheel($(this), deltaY);

 
		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" );
		$("#direction").val("down");
		} 
}

if (deltaY == 1) {
	event.preventDefault();
	$("#delta7").val("tu som hore idem");
	wheel($(this), deltaY);
  
  	if($("div.actual").prev().eq(0).is("div.emptyT")) 
		{
	  $( "div.emptyT:last" ).next().eq(0).addClass( "actual" ); 
 		$( "div.emptyT" ).removeClass( "actual" ); 
    }
    
		else 
    {
		$( "div.actual" ).prev().eq(0).addClass( "actual" );
		$( "div.actual:last" ).eq(0).removeClass( "actual" ); 
		}

  
  
}



    console.log(delta);

});