Scroll with px steps

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.3/jquery.mousewheel.min.js"></script>
<div id="test">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

CSS

#test {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    position: relative;
}
}
.test2 {
    width: 100%;
    height: 3000px;
}
.block {
    height: 30px;
    box-sizing: border-box;
    width: 100%;
    background-color: blue;
    border: 3px solid black;
}
}

JavaScript

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

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