Javascript 获取溢出隐藏页中滚动的像素量

当页面中有大量滚动时，我希望能够为

正文

切换一个类，但有一个问题：这是一个全尺寸的隐藏溢出单页

我试过简单的方法：

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

我尝试了这种方法，在页面滚动1000像素后添加类

endScroll

，但是，它不起作用，因为它是一个隐藏溢出的单屏幕，没有实际的从顶部滚动。（为了更好地解释，用户滚动时会出现动画）

所以我尝试了这个方法：

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

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

});

$（document）.bind（'mousewheel'，函数（e）{
var delta=e.originalEvent.wheelDelta；
if（δ<0）{
$（'body'）.addClass（“endScroll”）；
}否则如果（增量>0）{
$（'body'）.removeClass（“endScroll”）；
}
});

虽然它实际上可以工作，但添加类后，只要用户滚动一次，它就会工作。我想不出一个方法，让它在滚动1000像素后切换类

---

提前谢谢你

编辑：我想这更接近你想要的。您需要一个跟踪变量来查看用户滚动了多少：

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

var-scrollVal=0；
$（文档）.bind（'mousewheel'，函数（e）{
scrollVal+=e.originalEvent.wheelDelta；
如果（scrollVal>0）scrollVal=0；
console.log（scrollVal）；
如果（滚动值<-1000）{
$（'body'）.addClass（“endScroll”）；
}否则{
$（'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");
    }    
});

var-scrollVal=0；
var mouseweelevt=（/Firefox/i.test（navigator.userAgent））？“鼠标滚轮”：“鼠标滚轮”；
$（文档）.bind（mouseweellevt，函数（e）{
var offset=-1*e.originalEvent.wheelDelta；
if（mouseweelevt==“DOMMouseScroll”）{
offset=e.originalEvent.layerY-e.originalEvent.clientY；
}
scrollVal+=偏移量；
如果（scrollVal<0）scrollVal=0；
console.log（scrollVal）；
如果（滚动值>1000）{
$（'body'）.addClass（“endScroll”）；
}否则{
$（'body'）.removeClass（“endScroll”）；
}    
});

只需将其滚动至1000px，即可看到背景为红色，如果向上滚动，背景将再次变为黑色

$（窗口）.on（“滚动”，函数（）{
如果（$（窗口）.scrollTop（）>1000）{
$（“.scroll-div”）.addClass（'scroll-div-red'）；
}
否则{
$（“.scroll-div”）.removeClass（'scroll-div-red'）；
}
});
。滚动div{
背景：#000；
高度：1500px；
溢出：隐藏；
}
.scroll-div-red.scroll-div{
背景：红色；
}

嘿！谢谢你的帮助，但还是不行/“body”是滚动容器吗？还是比这低一级？明白了。我删除了保留值cappedI不认为FF支持该事件的行。您可以使用：var mouseweelevt=（/Firefox/i.test（navigator.userAgent））？“DOMMouseScroll”：“mousewheel”要测试：我修改了，但你必须调整。