$(window).height() 文檔高度問題


遇到一個這樣的問題:

  有個項目做的好好的,測試時一步一步小心過來,做了一段時間后,發現前面的完成的功能出了問題了

  首先描述下出問題的功能:

做滾動條下拉加載的時候用的網上找的一種方法

$(window).scroll(function(){
      if($(document).scrollTop()>=$(document).height()-$(window).height()){
     alert("aa");  
   }
 });

  

當我們出現滾動條時,把滾動條下拉就可以產生事件,這樣我們就可以在事件中添加需要加載的網頁內容,許多網站都是這樣做用來節省圖片服務器壓力。

但今天做着做着發現在ie上面運行正常,在google和火狐上面跑就不正常了。因為一直用的ie測試的,所以,不知道當時改了哪里會引出這個錯誤,錯誤出現情況如下

正常情況是

當滾動條到底部時,才觸發事件,我這樣就可以加載我所需要的內容了,因為$(document).scrollTop()>=$(document).height()-$(window).height()的意思是當滾動條高度大於窗口高度時-文檔高度時,就觸發該事件,所有就看到了上圖所示的效果!

但后面出現錯誤的情況是:

無論滾動條怎么動都會觸發這個事件

后面打印出這兩個值:發現這個$(document).height()  和 $(window).height() 這兩個值在 google 和 firefox里的值竟然是一樣的,在ie中卻又不同,也就是不管滾動條怎么動,這個判斷條件始終成立,所以出現了ie上沒事,其他瀏覽器出現不正確的情況。

解決辦法:

如果你和我一樣都是改了這個才出了問題,那么就是這個原因了

我是改了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

改成了

<html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'>

最后改回來,這個問題就解決了

也就是$(window).height()的值正常了,真是坑爹的問題

 

ps:我是一個喜歡按照自己風格來寫代碼,不管是前台還是后台,盡量做到能代碼備份,當某天無意改了代碼,當時可能沒發現問題。當某天出了問題了,能回退到前面某一個時間點的代碼,那便可以查找一些問題,像我今天遇到的這種問題,也不是沒有其他解決辦法。我的解決辦法就是回退到以前的代碼,因為我記得以前這塊是沒問題的,所有仔細核對后才發現是改了這個頭部信息

關於這種工具我現在只知道eclipse的 show local history!這個功能在每保存一次的時候就備份一次,功能非常強大,是保存在本地機器上面的

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM