Javascript 仅在特定div上启用/触发鼠标滚轮效果（非整页）

我是在jQuery中搜索鼠标滚轮事件后写这篇文章的，但可能是因为我缺乏知识而没有提出正确的问题，这就是为什么我还没有找到任何有用的答案

我想实现的是鼠标滚轮效果，我只能在称为#scroller的特定div中触发。我正在使用Brandon Aaron的jquery mousewheel插件和一个脚本，每当我进行增量滚动时，它会将最大值更新到下一张或上一张.js幻灯片

小提琴链接： 我创造了这把小提琴。正如您所见，它从一张幻灯片“跳跃”到另一张幻灯片，但随后“滚动条”外的内容不再可访问！我希望它有一个正常的轮子鼠标行为：S。我也有一个工作的网址，我想在那里应用这种效果，如果你认为这有任何用处

为了更好地解释结构和预期效果，以下是一幅图像：

我已经尝试将脚本绑定到

$（'#scroller'）.mouseover（function（）{myscript}）但这不起作用。鼠标滚轮启动正常，切换到跳跃模式正常，但离开div#scroller后再也没有恢复正常，我不知道如何重置这种行为

我现在的脚本是：

jQuery(document).ready(function($) {

    var slide = $('.js-slide');
    var sectionHeight = $(window).height();
    var slideHeight = $(slide).height();    
    var scrollingScreen = false;

        $('#scroller').mouseover(function(){

            $(slide).mousewheel(function(event, delta) {
                if ( !scrollingScreen ) {
                    scrollingScreen = true; // prevent call
                    var top = $("body").scrollTop() || $("html").scrollTop();
                    // Chrome places overflow at body, Firefox places whacks at html...
                    // Finds slide headers above/below the current scroll top
                    var candidates = $(slide).filter(function() {
                        if ( delta < 0 )
                            return $(this).offset().top > top + (1);
                        else
                            return $(this).offset().top < top - (1);
                    });
                    // one or more slides found? Update top
                    if ( candidates.length > 0 ) {
                        if ( delta < 0 )
                            top = candidates.first().offset().top;
                        else if ( delta > 0 )
                            top = candidates.last().offset().top;
                    }
                    // Perform animated scroll to the right place
                    $("html,body").animate({ scrollTop:top }, "easeInOutQuint", function() {
                        scrollingScreen = false; // Release call
                    });
                }
                return false; 
            }); // closes mousewheel

       }); // closes mouseover

});

jQuery（文档）.ready（函数（$）{
var slide=$（'.js slide'）；
var sectionHeight=$（窗口）.height（）；
var slideHeight=$（slide）.height（）；
var scrollingScreen=false；
$（“#滚动条”）.mouseover（函数（）{
$（幻灯片）.鼠标滚轮（函数（事件，增量）{
如果（！滚动屏幕）{
scrollingScreen=true；//阻止调用
var top=$（“body”）.scrollTop（）| |$（“html”）.scrollTop（）；
//Chrome将溢出放在正文中，Firefox将重击放在html中。。。
//在当前滚动顶部上方/下方查找幻灯片标题
var候选者=$（幻灯片）.filter（函数（）{
if（δ<0）
返回$（this）.offset（）.top>top+（1）；
其他的
返回$（this）.offset（）.top0）{
if（δ<0）
top=候选项。第一个（）.offset（）.top；
否则如果（增量>0）
top=候选项。最后一个（）.offset（）.top；
}
//执行动画滚动到正确的位置
$（“html，body”）.animate（{scrollTop:top}，“easeInOutQuint”，function（）{
scrollingScreen=false；//释放调用
});
}
返回false；
})；//关闭鼠标滚轮
})；//关闭鼠标盖
});

任何关于如何实现这一目标的帮助或见解都将不胜感激

谢谢大家!
 好的。我终于找到了！！我查看了插件作者记录不同鼠标滚轮事件的网站，包括禁用所有鼠标滚轮事件和重置正常滚动鼠标。在这里我找到了函数.unmousewheel（）的用法，这正是我想要的

但是现在，由于脚本在向下滚动时无法找到超过de last的更多幻灯片，而在向上滚动时无法找到超过第一张幻灯片的更多幻灯片，因此无法使用滚轮访问滚动之前和之后的内容。这就是为什么在第一张幻灯片或最后一张幻灯片上，我不得不改变一点脚本并强制跳转

无论如何，下面是脚本：

jQuery(document).ready(function($) {

    var slide = $('#scroller .sectioncontainer');
    var sectionHeight = $(window).height();
    var slideHeight = slide.height();
    var scrollingScreen = false;

    slide.mousewheel(function(event, delta) {
        if ( !scrollingScreen ) {
            scrollingScreen = true; // prevent call

            var top = $("body").scrollTop() || $("html").scrollTop();
            // Chrome places overflow at body, Firefox places whacks at html...

            // Finds slide headers above/below the current scroll top
            var candidates = slide.filter(function() {
                if ( delta < 0 )
                    return $(this).offset().top > top + (1/120);
                else
                    return $(this).offset().top < top - (1/120);
            });

            // one or more slides found? Update top
            if ( candidates.length > 0 ) {
                if ( delta < 0 )
                    top = candidates.first().offset().top;
                else if ( delta > 0 )
                    top = candidates.last().offset().top;
            } else{ // no more slides found
                     if ( delta < 0 )
                    top = $("#contact").offset().top;
                else if ( delta > 0 )
                    top = $("#about").offset().top;
            }

            // Perform animated scroll to the right place
            $("html,body").animate({ scrollTop:top }, "easeInOutQuint", function() {
                scrollingScreen = false; // Release call
            });
        }
        return false; 
    });

    $("#contact").unmousewheel();
    $("#about").unmousewheel();
    $("#div1").unmousewheel();
    $("#div2").unmousewheel();
    $("#div3").unmousewheel();
    $("#div4").unmousewheel();
    $("#div5").unmousewheel();
    // . . . 
    //and all other divs and sections that don't use the mousewheel

});

jQuery（文档）.ready（函数（$）{
var slide=$（“#scroller.sectioncontainer”）；
var sectionHeight=$（窗口）.height（）；
var slideHeight=slide.height（）；
var scrollingScreen=false；
滑动鼠标滚轮（功能（事件，增量）{
如果（！滚动屏幕）{
scrollingScreen=true；//阻止调用
var top=$（“body”）.scrollTop（）| |$（“html”）.scrollTop（）；
//Chrome将溢出放在正文中，Firefox将重击放在html中。。。
//在当前滚动顶部上方/下方查找幻灯片标题
var候选者=slide.filter（函数（）{
if（δ<0）
返回$（this）.offset（）.top>top+（1/120）；
其他的
返回$（this）.offset（）.top0）{
if（δ<0）
top=候选项。第一个（）.offset（）.top；
否则如果（增量>0）
top=候选项。最后一个（）.offset（）.top；
}else{//找不到更多幻灯片
if（δ<0）
top=$（“#contact”）.offset（）.top；
否则如果（增量>0）
top=$（“#about”）.offset（）.top；
}
//执行动画滚动到正确的位置
$（“html，body”）.animate（{scrollTop:top}，“easeInOutQuint”，function（）{
scrollingScreen=false；//释放调用
});
}
返回false；
});
$（“#联系人”）.unmousewheel（）；
$（“#关于”）.unmousewheel（）；
$（“#div1”）.unmousewheel（）；
$（“#div2”）.unmousewheel（）；
$（“#div3”）.unmousewheel（）；
$（“#div4”）.unmousewheel（）；
$（“#div5”）.unmousewheel（）；
// . . . 
//以及所有其他不使用鼠标滚轮的div和section
});

下面是.
用它添加HTML和CSS，并在中发布演示。更正错误，如
$（“#滚动条”）
感谢您对
“#滚动条”
的更正。我的脚本中的内容是正确的，但复制错误。//好吧，我不知道。谢谢我从主体顶部检查scrollTop（），因为它是第一个设计