全页网站并使用鼠标滚轮滚动浏览各个部分

Question

我正在建立一个网站，其首页由“全页部分”组成。我的最终目标是或多或少地实现该插件提供的功能：

http://alvarotrigo.com/fullPage/

但当我并不真正需要所有这些时，我想避免包含 1400 行脚本。

我在这个问题中找到了一个很好的起点：

如何用鼠标滚轮一次向下滚动 100%？-jquery

这是我当前使用的代码的小提琴（仅使用鼠标滚轮的一格滚动）：

http://jsfiddle.net/JqU2T/5/show/

以及代码本身：

$(document).ready(function () {
var divs = $('.mydiv');
var dir = 'up'; // wheel scroll direction
var div = 0; // current div
$(document.body).on('DOMMouseScroll mousewheel', function (e) {
    if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
        dir = 'down';
    } else {
        dir = 'up';
    }
    // find currently visible div :
    div = -1;
    divs.each(function(i){
        if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
            div = i;
        }
    });
    if (dir == 'up' && div > 0) {
        div--;
    }
    if (dir == 'down' && div < divs.length) {
        div++;
    }
    //console.log(div, dir, divs.length);
    $('html,body').stop().animate({
        scrollTop: divs.eq(div).offset().top
    }, 200);
    return false;
});
$(window).resize(function () {
    $('html,body').scrollTop(divs.eq(div).offset().top);
});
});

它工作得很好，但是，它不直观，并且没有考虑不考虑效果的滚动事件。例如，用户可能会通过滚动鼠标滚轮 2 或 3 次来开始向下滚动页面，然后才能弄清楚页面上的效果，此时他们已经位于第四张幻灯片上。我链接的插件可以很好地处理这个问题，但是，如果用户滚动几次，它仍然只会将他们带到下一张幻灯片。再说一次，它并不完美，但对我来说已经足够好了。

我偶然发现了这个问题，其中包含潜在的解决方案：

jQuery 工具可使用鼠标滚轮滚动 - 滚动一个位置并停止

我对 jQuery 比较陌生，并且已经超出了我的深度。我尝试过以各种方式将解决方案中的代码实现到我的脚本中，但老实说，我真的不知道我在用它做什么。

如果有任何 jQuery 专家愿意帮助我，我将非常感激:)

Answer 1

如果已经有一个插件但您担心文件大小，我建议缩小。看起来github上的插件已经将JS缩小到只有38行（比1400行好得多），你可以缩小CSS并将所有CSS文件连接在一起，它根本不会很大。很抱歉，如果这不是您正在寻找的答案，但这就是我会做的。任何生产 JS 和 CSS 都应该被缩小。