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

我想要实现的是鼠标滚轮效果，我只能在名为#scroller的某个 div 内触发该效果。我正在使用 Brandon Aaron 的 jquery mousewheel 插件和一个脚本，每当我增量滚动时，该脚本将顶部值更新为下一个或上一个 .js-slide。

小提琴链接：我创建了这个小提琴链接。正如您所看到的，它从一张幻灯片“跳转”到另一张幻灯片，但是#scroller 之外的内容不再是可访问的！我希望它具有正常的滚轮鼠标行为：S。我还有一个工作网址，我想在其中应用此效果，如果您认为这有任何用处。

为了更好地解释结构和预期效果，这里有一张图片：

我已经尝试过只将我的脚本绑定到，$('#scroller').mouseover(function(){ my script });但这没有用。鼠标滚轮开始正常，它切换到跳跃模式正常，但在离开 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

});

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

谢谢！

解决方案

行。我终于找到了！！我查看了插件作者记录不同鼠标滚轮事件的网络，包括停用所有事件和重置普通滚动鼠标。在那里我找到了函数.unmousewheel() 的使用，正是我想要的！

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

无论如何，这是脚本：

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

});

这是结果。