jquery 用鼠标滚轮垂直滚动

Question

我有一个 div，其中包含我想要使用 jquery 鼠标滚轮插件上下滚动的图像。不知道如何做到这一点，文档不是很有帮助，如果有任何建议，我们将不胜感激。

<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('鼠标滚轮', function(event,delta){ 如果(增量 > 0){

}其他{

}});

Answer 1

如果您正在使用此文件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);
    }        
});

编辑:

这是旧答案，但刚刚访问了我上传的演示，返回了 404，所以我再次上传了代码，它不起作用，所以我对代码进行了一些修改，这是工作版本:

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

jQuery 鼠标滚轮的副本可以在我的一个开源项目中找到，该项目位于 npm 上并可从 unpkg 访问:

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

演示现在可以运行并且位于同一位置:

https://jcubic.pl/mousewheel.html