第49天：封装自己的scrollTop
Posted 半指温柔乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第49天：封装自己的scrollTop相关的知识，希望对你有一定的参考价值。
一、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的主要内容，如果未能解决你的问题，请参考以下文章