Edit in JSFiddle

$(function () {
    var el = $('.inner');
    el.css('bottom', '0px');
    var lastIndex = 1;
    var distance = 0;
    $('#a').val(0);
    $('#b').val(lastIndex);
    var len = 3;

    var lock = {
        isEnabled: false,
        enable: function () {
            this.isEnabled = true;
        },
        disable: function () {
            this.isEnabled = false;
        }
    };

    $(document).on('mousewheel', '.inner', function (event) {
        if (!lock.isEnabled) {
            lock.enable();
            if (event.deltaY < 0) {
                distance = lastIndex == len ? 0 : lastIndex++ * 150;
                lastIndex = distance === 0 ? 1 : lastIndex;
            } else if (event.deltaY > 0) {
                lastIndex = lastIndex - 1 < 1 ? len : lastIndex - 1;
                distance = (lastIndex - 1) * 150;
            }
            el.stop(false, false).animate({
                bottom: '-' + distance
            }, 900, function () {
                $('#a').val(event.deltaY < 0 ? "down" : "up");
                $('#b').val(lastIndex);
                lock.disable();
            });
        }
    });
});

<div class="wrapper">
    <div class="inner">
        <div data-index="1" class="box" style="background-color:#f5f5f5">1</div>
        <div data-index="2" class="box" style="background-color:#c5f5f5">2</div>
        <div data-index="3" class="box" style="background-color:#b5f5f5">3</div>
    </div>
</div>
<div>delta:
    <input type="text" id="a" size="5" />&nbsp; last index:
    <input type="text" id="b" size="5" />
</div>
<pre>
父元素设置position: relative;(wrapper),此时能作用overflow:hidden;
子元素设置position: absolute;(inner),此时能作用定位，
用负数定位，就能移动到所需位置
</pre>

body {
    box-sizing: border-box;
    overflow: hidden;
}
.wrapper {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 150px;
    border: solid 1px black;
    overflow: hidden;
}
.inner {
    position: absolute;
    transition: top 0.3s 0.3s;
}
.box {
    height: 150px;
    background-color: #f3f3f3;
    width: 200px;
    color: #333;
}