jquery带鼠标滚轮的垂直滚动

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

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

$（'innerScroll'）.bind（'mousewheel'，函数（事件，增量）{ 如果（增量>0）{

}否则{

} });

---

如果您正在使用此文件

编辑：

这是一个旧答案，但刚刚有访客访问了我上传的演示，返回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);
        }
    });
});

$（文档）.ready（函数（）{
$（'.innerScroll'）.mousewheel（函数（事件，增量）{
var self=$（这是）；
var scrollTop=self.prop（'scrollTop'）；
if（δ<0）{
自身道具（'scrollTop'，scrollTop+40）；
}否则{
self.prop（'scrollTop'，scrollTop-40）；
}
});
});

jQuery mousewheel的副本可以在我的一个开源项目中找到，该项目位于npm上，可从unpkg访问：

演示现在可以工作，并且位于同一位置：

---

我注意到您将最外层的div设置为overflow hidden，删除该div并添加相对位置。 然后在整个事件周围添加一个div，并在其上隐藏溢出

然后你可以：

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

不过，你需要一些逻辑来在顶部和底部停止它。将包装器的高度与container.css（顶部）或.css（底部）进行比较的if语句。您还必须去掉css属性的“px”

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

---

.css（“bottom”）.substring（0，$（“#image_container”）.css（“bottom”）.indexOf（“px”））谢谢，但它实际上对我不起作用页面没有上下滚动？parseInt没有在div中打印40px奇怪？？？我在这里举了个例子，在
jsbin
中，它在Opera和Firefox上工作，但在Chrome上不工作，我不知道为什么。我看到的第一个问题是，
$（'innerScroll'）
只会拾取innerScroll元素，即
foo
。您需要具有innerScroll类的元素，因此它应该是
$（'.innerScroll'）
if (delta > 0){$(this).css({"top":+=40,"bottom":-=40});}
else{$(this).css({"top":-=40,"bottom":+=40});}

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