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>