第49天：封裝自己的scrollTop
阿新 • • 發佈：2017-10-11
滾動效果 pan logs strong 聲明 win 滾動 最新 atm
一、scroll家族
offset 自己的偏移
scroll滾動的
scrollTop和scrollLeft
scrollTop 被卷去的頭部
當滑動滾輪瀏覽網頁的時候，網頁隱藏在屏幕上方的距離
二、頁面滾動效果事件
window.onscroll=function(){頁面滾動語句}
三、獲取scrollTop
谷歌和沒有聲明DTD<DOCTYPE>：document.body.scrollTop
火狐和其他瀏覽器：document.documentElement.scrollTop
IE9+和最新瀏覽器:window.pageXOffset; pageYOffset(scrollTop)
兼容性寫法：
var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
四、json對象表示
var json={key:value,key1:value}
使用方法
var json={name："李白"，age：58};
json名.屬性 json.name 李白
五、判斷是否聲明DTD
document.compatMode==="BackCompat"
BackCompat 未聲明
CSS1Compat 已經聲明
註意大小寫
六、封裝scrollTop
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>封裝自己的scrollTop</title> 6 <style> 7 body{ 8 height: 3000px; 9 } 10 </style> 11 </head> 12 <body> 13 14 </body> 15 </html> 16 <script> 17 //var json={left:10,right:10}; 18 //json.left 19 function scroll(){ 20 if(window.pageYOffset!=null){//IE9+和其他瀏覽器 21 return{ 22 left:window.pageXOffset, 23 top:window.pageYOffset 24 } 25 }else if(document.compatMode=="CSS1Compat"){//判斷是否聲明DTD 26 return{//聲明的 27 left:document.documentElement.scrollLeft, 28 top:document.documentElement.scrollTop 29 } 30 } 31 return{//未聲明的 32 left:document.body.scrollLeft, 33 top:document.body.scrollTop 34 } 35 } 36 37 window.onscroll=function(){ 38 console.log(scroll().top); 39 } 40 </script>
第49天：封裝自己的scrollTop