Question

我正在尝试创建此行为：当用户滚动鼠标滚轮（或按↓）时，网页会向下滚动窗口的高度。

我最终得到了以下代码：

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;
    }
});

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

Answer 1

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

所以基本上，使用你编写的代码会遇到无限循环，因为只要第一个滚动事件被触发，另一个会被scrollTop()触发，而你的preventScroll变量仍然没有设置为false等等。

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

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() preventScroll变量时，仍然会设置为true！

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

Answer 2

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

$(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);
    });
});

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

阻止scrollTop调用scroll事件

2 个答案: