8

我正在尝试创建这种行为：当用户滚动鼠标滚轮（或按下↓</kbd>) the webpage is scrolled down by the height of the window.

我最终得到了以下代码：

var newScrollTop,
    oldScrollTop = $(window).scrollTop(),
    preventScroll = false;
$(window).scroll(function() {
    if (!preventScroll) {
        preventScroll = true;
        newScrollTop = $(this).scrollTop();
        if (newScrollTop > oldScrollTop) {
            $(this).scrollTop( oldScrollTop + $(window).height() );
        }
        else {
            $(this).scrollTop( oldScrollTop - $(window).height() );
        }
        oldScrollTop = newScrollTop;
        preventScroll = false;
    }
});

但这并不像我预期的那样工作：在滚动事件页面上滚动到最边缘（底部或顶部）。我错过了什么？

4

2 回答 2

4

问题是您正在使用scrollTop()哪个触发窗口滚动事件本身内的滚动事件。

因此，基本上，使用您编写的代码，您会陷入无限循环，因为一旦触发第一个滚动事件，就会触发另一个滚动事件，scrollTop()而您的preventScroll变量仍未设置为 false 等等。

要使您的代码正常工作，您必须将preventScroll变量设置false为 setTimeout 函数内部，如下所示：

var newScrollTop,
    oldScrollTop = $(window).scrollTop(),
    preventScroll = false;

$(window).scroll(function() {
    if (!preventScroll) {
        preventScroll = true;
        newScrollTop = $(this).scrollTop();
        if (newScrollTop > oldScrollTop) {
            $(this).scrollTop( oldScrollTop + $(window).height() );
        }
        else {
            $(this).scrollTop( oldScrollTop - $(window).height() );
        }
        oldScrollTop = newScrollTop;

        setTimeout(function(){ preventScroll = false; }, 0);
    }
});

我们在设置preventScroll为之前添加了一些“延迟” false。这样，当您调用scrollTop() preventScrollvariable 时，仍将设置为 true ！

这是一个工作小提琴： http: //jsfiddle.net/J6Fcm/（我修改了一点你的代码，让滚动步骤按预期工作）

于 2012-10-06T21:16:31.240 回答
2

没有简单的方法可以覆盖默认浏览器滚动功能。这是一种做你想做的事情的方法，但它需要 Brandon Aaron 的jquery-mousewheel 插件来管理鼠标滚轮：

$(function() {
    // Ugly hack to disable browser scrolling (downside: hides scrollbar!!!)
    $('html').css('overflow', 'hidden');

    // Get viewport height by which to scroll (up or down)
    var viewportHeight = $(window).height();

    // Recache viewport height on browser resize
    $(window).on('resize', function() {
        viewportHeight = $(window).height();
    });

    // Scroll on mousewheel
    $('html').on('mousewheel', function(event, delta, deltaX, deltaY) {
        // scroll down
        if (deltaY < 0)
            window.scrollBy(0, viewportHeight);
        // scroll up
        else
            window.scrollBy(0, -viewportHeight);
    });

    // Disable document keypress event
    // which would scroll the content even with "overlow: hidden"
    $(document).on('keypress', function(){
        return false;
    });

    // Scroll on arrow up/down keys
    $(document).on('keydown', function(event){
        // arrow down key
        if (event.which == 40)
            window.scrollBy(0, viewportHeight);
        // arrow up key
        if (event.which == 38)
            window.scrollBy(0, -viewportHeight);
    });
});

这是演示代码的小提琴。除了我的解决方案有一个丑陋的缺点外，这一切都很好。$('html').css('overflow', 'hidden');正在删除浏览器滚动条。

于 2012-10-06T20:27:18.660 回答