精確比較$（窗口）.height（）以$（窗口）.height（）滾動的特定值

Question

首先我得到這個高度我想和滾動的特定值來比較值。

$(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.滾動值----> 427
2.window高度---> 431

不相同滾動值和窗口的高度。滾動值直接從2.滾動值----> 427跳到滾動值----> 432。並跳過431的滾動值。如何比較確切的滾動值與窗口高度。

Answer 1

1. 舊滾動值----> 423

1.window高度---> 431

2. 新滾動值----> 427

2.window高度---> 431

你不能，因爲它取決於用戶的速度」 （即頁面應該滾動多少行文本）。

但是，你可以跟蹤滾動的最後價值，並檢查窗口的高度是最後的價值和滾動的新值之間。希望它可以幫助

Answer 2

這裏：

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

你依靠，這將觸發滾動的每一個像素的scroll事件瀏覽器。
實際上，這是不可能的，因爲性能方面的原因（考慮如果我將1000像素滾動到頁面底部，代碼的速度會有多慢）

這很像是比較浮點數。你需要一些常數，以確定哪些被認爲是「平等」：

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

爲了獲得更好的效果，你可以在WINDOWHEIGHT，如鹼deltaScroll它的5％：

var deltaScroll = windowHeight/20 

（嘗試不同的值，以找到最好的之一）

Answer 3

的想法是跟蹤用戶是否滾動過去的某個點並作出反應「事件」。

var wasOnfirstPage = true; // scroll < height 

$(window).scroll(function (event) { 
    var scroll = $(window).scrollTop(); 
    var windowHeight = $(window).height(); 
    var isOnFirstPage = scroll < windowHeight; // current state 

    if (wasOnFirstPage && !isOnFirstPage) { 
     console.log("user scrolled fully past first page"); 
    } 
    else if (!wasOnFirstPage && isOnFirstPage) { 
     console.log("user scrolled back up"); 
    } 

    wasOnFirstPage = isOnFirstPage; 
}); 

這樣，不僅無關緊要，值變化超過一個像素，您還檢測滾動的方向。