jquery vertical scroll with mousewheel

I have div containing images that I want to scroll up and down using the jquery mousewheel plugin. Not sure how to do this, the documentation is not very helpful would be grateful for any suggestions.

<div class="innerScroll" style="float:left;width:448px;height:500px; overflow:hidden;">
<div class="mediaPanel"><img src="media/poster_silence.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/po开发者_如何学Pythonster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>

<script type="text/javascript">

$('innerScroll').bind('mousewheel', function(event,delta){ if (delta > 0) {

} else {

} });

if you're using this file jQuery_mousewheel_plugin.js

$('.innerScroll').mousewheel(function(event,delta){

    var media = $(this).find('.mediaPanel');
    if (delta > 0) {
        media.css('top', parseInt(media.css('top'))+40);
    } else {
        media.css('top', parseInt(media.css('top'))-40);
    }        
});

EDIT:

This is old answer but just got visitor to the demo I've uploaded that returned 404, so I've uploaded the code again, it was not working, so I've modified the code a bit, here is working version:

$(document).ready(function(){
    $('.innerScroll').mousewheel(function(event, delta){
        var self = $(this);
        var scrollTop = self.prop('scrollTop');
        if (delta < 0) {
            self.prop('scrollTop', scrollTop + 40);
        } else {
           self.prop('scrollTop', scrollTop - 40);
        }
    });
});

Copy of jQuery mousewheel can be found in one of my open source projects that are on npm and accessible from unpkg:

https://unpkg.com/jquery.terminal/js/jquery.mousewheel-min.js

Demo now works and is located in same place:

https://jcubic.pl/mousewheel.html

I noticed you have the outermost div set to overflow hidden, remove that and add position relative. Then add a div around the whole thing with overflow hidden on that.

Then you can:

if (delta > 0){$(this).css({"top":+=40,"bottom":-=40});}
else{$(this).css({"top":-=40,"bottom":+=40});}

You'll need some logic for stopping it at the top and bottom though. An if statement comparing the height of the wrapper to the container.css(top) or .css(bottom). You have to strip the "px" of the css property too.

.css("bottom").substring(0,$("#image_container").css("bottom").indexOf("px")) <=
(content_initial_height - slider_height))