03-JS特效-三大系列之scroll系列

三大系列

offset-位移

scroll-卷页（本文）

client-可视区

onscroll 滚动事件

(window.onscroll = fun…)
屏幕每滚动一次，哪怕只有1像素都会触发这个事件。这样就可以用来检测屏幕滚动了.只能有一个,写了多个以最后一个为准，同理 window.onload

onscroll常用属性（4个）

1、scrollWidth/scrollHeight 内容的宽高

IE67可以比盒子小。 IE8+火狐谷歌不能比盒子小

2、scrollLeft/scrollTop 被卷去的左侧和头部（浏览器无法显示的左/头部）

一般调用document.body.scrollTop:

1、scrollWidth和scrollHeight: 检测盒子的宽高。

scrollHeight = height + padding; //不包括border和margin;

2、scrollLeft/scrollTop

兼容问题：

 - 未声明 DTD（谷歌只认识他）（火狐IE9+认识他） document.body.scrollTop/scrollLeft - 已经声明DTD（IE678只认识他）(火狐IE9+认识他) document.documentElement.scrollTop/scrollLeft - 火狐/谷歌/ie9+以上支持的(不管DTD) window.pageYOffest/pageXOffest 

兼容写法,不管有没有DTD：

    //1.推荐这种    var scrollTop = window.pageYOffset ||document.documentElement.scrollTop || document.body.scrollTop;    //2.取巧：(两个值一个取到值，另一个为0，所以无论任何浏览器，都可以使用+)    var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;

封装scroll方法：

   //1.最初版本，封装scroll    function scroll() {    //返回一个json；一次调用，两个值都可以获取    var json = {        "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,        "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft    };    return json;}//怎么用？var aaa = scroll();console.log(aaa.top);console.log(aaa.left);//2.改进：（简洁版）function scroll() {    return {        "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,        "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft    };}//3.jQuery用的这种封装(随便写写)function scrollTop() {    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;    return scrollTop;}function scrollLeft() {    var scrollLeft = window.pageXOffset || document.documentElement || document.body.scrollLeft;    return scrollLeft;}

关于DTD一点小知识：

dtd约束：（简说）

；没有个这个标签就代表着有没有dtd约束

判断页面有没有dtd:

alert(document.compatMode);

BackCompat 未声明

CSS1Compat 已经声明

案例：

03.1-固定导航栏