test123borisa-W

by Borisko

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.3/jquery.mousewheel.min.js"></script>
<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

var valuePos = $("#target").scrollTop();

function wheel($div, deltaY) {
  var step = 30; //pixel step
  /* var pos = $div.scrollTop(); */
  var pos = valuePos;

  if (deltaY <= -1) {
    deltaY = -1;
  }
  if (deltaY >= 1) {
    deltaY = 1;
  }

  var nextPos = pos + (step * (-deltaY));
  var fixpos = Math.floor(nextPos / 30.0) * 30;
  valuePos = fixpos;
  if (fixpos <= 0) {
    fixpos = -30;
  }
  if (fixpos > 240) {
    fixpos = 240;
  }

  console.log("DelatY: " + deltaY + ", Step: " + step + ", nextPos: " + nextPos + ", FIXED: " + fixpos);

  //$div.scrollTop(fixpos);

  $div.stop().animate({
    scrollTop: (fixpos)
  }, 750);

  $("#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");
    }



  }

});