Question

我正在建立一个网页，其首页由＆＃34;整页部分组成＆＃34;。我的最终目标是或多或少地实现此插件提供的功能：

除非我不想包含1400行剧本，否则我并不需要这一切。

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

How To Scroll down 100% with Mousewheel at once ? - jquery

这是我正在使用的代码的小提琴（只使用鼠标滚轮的一个凹槽滚动）：

代码本身：

$(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次，从而开始向下滚动页面，此时它们已经在第4张幻灯片上。我链接的插件处理得非常好，但如果用户滚动几次，它仍然只会将它们带到下一张幻灯片。再说它并不完美，但它对我来说已经足够了。

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

jQuery Tools Scrollable with Mousewheel - scroll ONE position and stop

我对jQuery相对较新，并且已经超出了我的目标。我已尝试以各种方式将解决方案中的代码实现到我的脚本中，但说实话，我并不知道自己在做什么。

如果有任何jQuery专家想帮助我，我会非常感激：）

Answer 1

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

整页网站并使用鼠标滚轮滚动部分

1 个答案: