Question

我正在尝试找到一种在用户滚动时触发功能的方法。但只有当用户滚动超过x量 - 比如说10px时 - 才能避免意外/小页面滚动。

我目前在页面顶部有一个固定的导航栏。当用户向下滚动时，添加类“撤退”，隐藏导航栏。当用户向上滚动时，类“撤退”将被删除：

$(function(){
    var previousScroll = 0;
    navOffset = $('nav').height()
});

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > navOffset) {
        if (currentScroll > previousScroll) {
            $('nav').addClass("retreat");
        } else {
            $('nav').removeClass("retreat");
        }
    } 
    previousScroll = currentScroll;
});

然而，这通常是在鼠标轻轻触摸或移动时偶然发生的。有没有办法忽略非常小的滚动，只有当用户滚动超过10px时才运行该功能？

查看这个工作演示的小提琴：http://jsfiddle.net/mymymy/An3LZ/

Answer 1

只需添加一个额外的检查，看看两个滚动位置之间的差异（40是单击滚动条上滚动向上/向下图标的像素数量，在Chrome中移动页面，根据需要更改）：

Demo Fiddle

将您的JS更改为以下内容：

var previousScroll = 0,
    navOffset = $('nav').height()

$(window).scroll(function () {

    var currentScroll = $(this).scrollTop();
    if (currentScroll > navOffset) {
        if (Math.abs(currentScroll - previousScroll) > 40) {
            if (currentScroll > previousScroll) {
                $('nav').addClass("retreat");
            } else {
                $('nav').removeClass("retreat");
            }
        }
    }
    previousScroll = currentScroll;
});

Answer 2

对于最安全和最健壮的方式，我认为最好为每个向上滚动创建1个变量并向下滚动并使用%检查是否有任何达到阈值。看看这个JSFiddle

var scroll_down = 1;
var scroll_up = 1;
$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();    
    if (currentScroll > navOffset) {
        if (currentScroll > previousScroll) {
            scroll_down++;
            scroll_up = 1;
        } else {
            scroll_up++;
            scroll_down = 1;
        }
        if(scroll_down%20 == 0){  //change 20 to bigger value for bigger treshold
            $('nav').addClass("retreat");
        } 
        else if(scroll_up%20 == 0){
            $('nav').removeClass("retreat");
        }
    }else{
        $('nav').removeClass("retreat");
        scroll_up = 1;
        scroll_down = 1;
    }
    previousScroll = currentScroll;
});

修改起初，我认为这是一个简单的问题，但不知何故有一些漏洞/错误，如果我也没注意。所以，我只是改变我的答案，希望它有帮助..

当用户滚动超过10px时如何运行功能？

2 个答案:

Demo Fiddle