1.滚动事件
window.onscroll=function(){
console.log(111);
}
2.scrollWidth和scrollHeight
scrollWidth=width+padding(不包括border和margin);
scrollHeight=height+padding:如果文字超出了盒子,高度为盒子内容
3.scrollLeft和scrollTop
被卷去的左侧和头部
4.兼容问题
window.onscroll=function(){
//没又DTD约束
//document.title=document.body.scrollTop;
//有DTD约束的
//document.title=document.documentElement.scrollTop;
//兼容写法
//document.title=document.body.scrollTop||document.documentElement.scrollTop;
//不管有没有DTD
//document.title=window.pageYOffset;
//完美写法
document.title=document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset;
}
5.Html基本结构访问方法
6.json对象遍历和是否声明DTD
var json={"aa":11,"bb":22};
//遍历方法是for..in
for(var k in json){
console.log(k);
console.log(json[k]);
}
判断是否声明DTD
document.compatMode === “BackCompat”
BackCompat 未声明
CSS1Compat 已经声明
7.封装兼容的scroll,返回json
<script>
window.onscroll=function(){
console.log(scroll().top);
console.log(scroll().left);
}
//封装兼容的scroll,返回json
function scroll(){
if(window.pageYOffset!==undefined){
var json={
"top":window.pageYOffset,
"left":window.pageXOffset
}
return json;
}else if(document.compatMode=="CSS1Compat"){
var json={
"top":document.documentElement.scrollTop,
"left":window.documentElement.scrollLeft
}
return json;
}else{
var json={
"top":document.body.scrollTop,
"left":window.body.scrollLeft
}
return json;
}
}
</script>