javascript - 获取溢出隐藏页面中滚动的像素数量

Question

我希望能够在页面中有大量滚动时为 body 切换一个类，但有一个问题:它是一个全尺寸的、隐藏的溢出、单个页面。

我尝试了简单的:

if ($(window).scrollTop() > 1000){
    $('body').addClass( "endScroll");
}
else {
    $('body').removeClass("endScroll");
}

我试过这种方法在页面滚动1000像素后添加类endScroll，但是，它不起作用，因为它是 overflow hidden 的单屏，没有实际从顶部滚动。 (为了更好地解释，当用户滚动时会出现一个动画)

所以我尝试了这个方法:

$(document).bind('mousewheel', function(e) {
    var delta = e.originalEvent.wheelDelta;

    if (delta < 0) {
        $('body').addClass("endScroll");
    } else if (delta > 0) {
        $('body').removeClass("endScroll");
    }

});

虽然它确实有效，但添加类后，它会在用户滚动一次后立即执行。我想不出一种方法让它在滚动 1000 像素后切换类。

提前致谢!

Answer 1

编辑:我认为这更接近您正在寻找的内容。您需要一个跟踪变量来查看用户滚动了多少:

var scrollVal = 0;
$(document).bind('mousewheel', function(e) {
    scrollVal += e.originalEvent.wheelDelta;        
    if (scrollVal > 0) scrollVal = 0;     

    console.log(scrollVal);        
    if (scrollVal < -1000) {
        $('body').addClass( "endScroll");
    }else {
        $('body').removeClass("endScroll");
    }    
});

编辑 2:Firefox 兼容性:

var scrollVal = 0;
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
$(document).bind(mousewheelevt, function(e) {
    var offset = -1 * e.originalEvent.wheelDelta;
    if (mousewheelevt == "DOMMouseScroll"){
      offset = e.originalEvent.layerY - e.originalEvent.clientY;
    }
    scrollVal += offset;        
    if (scrollVal < 0) scrollVal = 0;
    console.log(scrollVal);        
    if (scrollVal > 1000) {
        $('body').addClass( "endScroll");
    }else {
        $('body').removeClass("endScroll");
    }    
});