ScrollTop/ScrollLeft 是鼠标滚动，卷起来的高度/宽度
第一种方式.html（复杂方式）：
<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 () { console.log(scroll().top); console.log(scroll().left); } function scroll(){ if(window.pageYOffset !== undefined){ return { "top": window.pageYOffset, "left": window.pageXOffset }; }else if(document.compatMode === "CSS1Compat"){ //如果页面声明了DTD约束 return { "top": document.documentElement.scrollTop, "left": document.documentElement.scrollLeft }; }else{ //如果页面未声明DTD约束 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> 第二种方式.hrml（简单方式）： <!DOCTYPE html> <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 () { console.log(scroll().top); console.log(scroll().left); } function scroll(){ return { "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop, "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft } } </script> </body> </html>
