js滾動事件scroll家族
阿新 • • 發佈：2019-01-10
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //-----------------------滾動事件------------------ //基本語法 window.onscroll = function () { console.log(1); } //---------------------scrollWidth和scrollHeight------- var div = document.getElementsByTagName("div")[0]; //scrollWidth和scrollHeight不包括border和margin //scrollWidth = width + padding; // 不包括 border和margin; //高度有一個特點：如果文字超出了盒子，高度為超出盒子的內容的高。不超出是盒子本身高度 //IE8以下，不包括IE8為盒子本身內容的多少。 console.log(div.scrollWidth); console.log(div.scrollHeight); //--------------------scrollLeft和scrollTop----------- window.onscroll = function () { // console.log(document.body.scrollTop); //document.body.scrollTop：網頁被捲去的頭部 //相容有問題 document.title = document.body.scrollTop + " "+document.body.scrollLeft; } //相容寫法 window.onscroll = function () { //沒有dtd約束的 // document.title = document.body.scrollTop; //有dtd約束的 // document.title = document.documentElement.scrollTop; //相容寫法 // document.title = document.body.scrollTop || document.documentElement.scrollTop; // document.title = document.body.scrollTop + document.documentElement.scrollTop; // document.title = window.pageYOffset; // alert(window.pageYOffset); // document.title = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; } </script> </body> </html>