遇到一個這樣的問題:
有個項目做的好好的,測試時一步一步小心過來,做了一段時間后,發現前面的完成的功能出了問題了
首先描述下出問題的功能:
做滾動條下拉加載的時候用的網上找的一種方法
$(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!這個功能在每保存一次的時候就備份一次,功能非常強大,是保存在本地機器上面的