Question

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

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

FIDDLE LINK：我创造了这个小提琴link。正如你所看到的那样，它会跳跃＆＃34;从幻灯片到幻灯片，但是#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

});

这里是result。

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

1 个答案: