三种兼容表现形式：
document.body.scrollTop//360 谷歌等标准模式
document.documentElement.scrollTop//火狐,IE浏览器 及 怪异模式window.pageYOffset//最新的浏览器都支持 ie9+
未封装的写法：
window.οnscrοll=function(){
var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;//兼容写法
console.log(scrollTop);
}封装后的写法：
// varjson = {left: 10, right: 10} 变异
//json.left json.top
// 封装自己的scrollTop和scrollLeft
function scroll() {
if(window.pageXOffset != null){
return{
left:window.pageXOffset, //IE不支持
top:window.pageYOffset
}
}else if(document.compatMode == "CSS1Compat"){
// 如果是怪异模式
// 怪异模式就是没有声明文档类型DTD，即没有<!DOCTYPE html>这句
// document.compatMode == "BackCompat"//如果不是怪异模式；如果没有声明DTD
return{// 声明了DTD的document.documentElement 都支持,
left:document.documentElement.scrollLeft;//标准模式
top:document.documentElement.scrollTop
}
}
return{//没有声明DTD 怪异模式的写法：
left:document.body.scrollLeft,
top:document.body.scrollTop
}
}
window.οnscrοll=function(){
console.log(scroll().top);
console.log(scroll().left)
}html:
body {
height: 3000px;
width: 2000px;
}
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
