javascript - 精确比较 $(window).height() 值与滚动的特定值

Question

首先，我得到 $(window).height() ，并且我想将这个高度与滚动的特定值进行比较。

$(window).scroll(function (event) {
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        console.log("window height---> " +windowHeight);
        console.log("scroll value----> "+scroll);

        if (scroll == windowHeight) {
            console.log("---after compare--- ");
        }        
    });

但是当我比较滚动值时，有时滚动值会跳过一些值。

我的滚动值(在控制台中):

1.scroll value----> 423
1.window height---> 431
2.scroll value----> 427
2.window height---> 431
3.scroll value----> 432    
3.window height---> 431
4.scroll value----> 434
4.window height---> 431
5.scroll value----> 436
5.window height---> 431

如果您注意到第二次比较:

2.scroll value----> 427
2.window height---> 431

滚动值和窗口高度不同。滚动值直接从2.滚动值---->427跳到滚动值---->432。并跳过滚动的431值。如何将精确的滚动值与窗口高度进行比较。

Answer 1

这里:

if (scroll == windowHeight) {
    console.log("---after compare--- ");
}

您依赖的浏览器会在滚动的每个像素上触发 scroll 事件。
实际上，由于性能原因，这是不可能的(考虑一下如果我将 1000 像素滚动到页面底部，您的代码将会有多慢)

这很像比较 float 。您需要一些常量来确定什么被视为“相等”:

var deltaScroll = 15 ;
if (scroll > windowHeight - deltaScroll && scroll < windowHeight + deltaScroll) {
    console.log("---after compare--- ");
}

为了获得更好的结果，您可以将 deltaScroll 基于 windowHeight，例如其中5%:

var deltaScroll = windowHeight / 20

(尝试不同的值以找到最好的值)