带有鼠标滚轮的jQuery垂直滚动答案

【问题标题】：jquery vertical scroll with mousewheel带有鼠标滚轮的jQuery垂直滚动
【发布时间】：2010-09-19 21:41:28
【问题描述】：

我有一个 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('mousewheel', function(event,delta){ if (delta > 0) {

} 否则 {

} });

【问题讨论】：

我看到的第一个问题是你有$('innerScroll')，它只会拾取innerScroll元素，即<innerScroll>foo</innerScroll>。你想要带有 class innerScroll 的元素，所以它应该是 $('.innerScroll')

标签： jquery scroll mousewheel

【解决方案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

【讨论】：

谢谢，但它实际上并没有为我工作页面没有上下滚动？ parseInt 不打印 div 中的 40px 奇怪？？？？
我把例子放在这里jcubic.pl/mousewheel.html，在jsbinjsbin.com/asucu3，它适用于Opera和Firefox，但不适用于Chrome，不知道为什么。

【解决方案2】：

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

那么你可以：

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

不过，您需要一些逻辑来在顶部和底部停止它。 if 语句将包装器的高度与 container.css(top) 或 .css(bottom) 进行比较。您也必须剥离 css 属性的“px”。

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

【讨论】：