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

} });

回答1:

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

回答2:

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