仅在某些div上启用/触发鼠标滚轮效果（不是整页）

Question

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

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

FIDDLE LINK：我创建了这个小提琴链接 。 如您所见，它在幻灯片之间“跳跃”，但是#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

});

任何帮助或见解如何实现这一点将不胜感激。

谢谢！

Answer 1

好。 终于我找到了！ 我在网上浏览了该插件的作者记录不同鼠标滚轮事件的网站，包括停用所有鼠标滚轮事件和重置正常的滚动鼠标。 在哪里可以找到我想要的功能.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

});

这就是结果 。