jquery vertical scroll with mousewheel

Question

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/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>
<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 {

} });

Answer 1

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))

Answer 2

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);
    }        
});