| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| body { | |
| height: 5000px; | |
| width: 5000px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| //需求：封装一个兼容的scroll().返回值是json，用scroll().top获取scrollTop | |
| //需求：封装一个兼容的scroll().返回值是json，用scroll().left获取scrollLeft | |
| window.onscroll = function () { | |
| // var json = scroll(); | |
| // json.top; | |
| console.log(scroll().top); | |
| console.log(scroll().left); | |
| } | |
| function scroll(){ | |
| //如果这个属性存在，那么返回值应该是0-无穷大 | |
| //如果没有返回值是undefined； | |
| //只要判断不是undefined就可以调用此方法 | |
| //练习使用此种封装 | |
| if(window.pageYOffset !== undefined){ | |
| // var json = { | |
| // "top": window.pageYOffset, | |
| // "left": window.pageXOffset | |
| // }; | |
| // return json; | |
| return { | |
| "top": window.pageYOffset, | |
| "left": window.pageXOffset | |
| }; | |
| }else if(document.compatMode === "CSS1Compat"){ | |
| return { | |
| "top": document.documentElement.scrollTop, | |
| "left": document.documentElement.scrollLeft | |
| }; | |
| }else{ | |
| return { | |
| "top": document.body.scrollTop, | |
| "left": document.body.scrollLeft | |
| }; | |
| } | |
| //简单封装（实际工作使用） | |
| // return { | |
| // "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop, | |
| // "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft | |
| // } | |
| } | |
| </script> | |
| </body> | |
| </html> |
JS scroll()方法的封装
猜你喜欢
转载自blog.csdn.net/weixin_42304280/article/details/80709980
今日推荐
周排行