1. 程式人生 > >為什麼jQuery不能監聽body的滾動事件呢?

為什麼jQuery不能監聽body的滾動事件呢?

有如下測試,發現不管用:

   $(document.body).scroll(function (e) {
        alert('我滾動了');
    });

查閱資料發現:
這跟jQuery貌似沒什麼關係,跟BOM和DOM是有關係的。
用基於miniYUI輕量級框架的JS來測試一下各大主流瀏覽器下window和document以及document.body上的滾動事件,得出以下結論:
[ * ]
1. 幾乎所有瀏覽器都不支援在document.body上監聽整個網頁的滾動事件,除了QQ瀏覽器;[ *
]
2. 幾乎所有瀏覽器都支援在window物件上監聽整個網頁的滾動事件;[ *
]
3. 幾乎所有瀏覽器都支援在document物件上監聽整個網頁的滾動事件,除了QQ瀏覽器;[ *
]
4. 幾乎所有瀏覽器都支援用document.documentElement.scrollTop來獲取網頁的滾動高度,除了Chrome和Safari;[ *
]*********************************************************************************************************************************


5. 主要測試的瀏覽器:IE 9,Firefox 12.0,Chrome 0.0.1132.11,Safari 5.1.2,QQ瀏覽器 6.13,
通過測試,我們得出獲取網頁滾動高度scrollTop的最佳實踐為:[ *
]
把獲取滾動高度的事件處理程式繫結到window物件上;[ *
]
通過獲取document.documentElement.scrollTop和document.body.scrollTop兩者之間較大值為網頁的真實滾動高度。基於miniYUI的測試示例程式碼如下:

 miniYUI.event.on(window
, 'scroll', function (e) { alert(Math.max(document.body.scrollTop, document.documentElement.scrollTop)); });