由一个瀑布流导出对滚动条滚动距离，可视区尺寸，元素尺寸的内容的知识点
下面是在实现瀑布流中的一小段代码（当滚动条滚动距离+可视区高度>文档高度,请求数据）
window.onscroll = function () {
var scrollheight = document.documentelement.scrolltop || document.body.scrolltop;//滚动条纵轴滚动距离
var clientheight = document.documentelement.clientheight || document.body.clientheight;//可视区高度
var pageheight = oli[getminlist(oli)].offsetheight;//元素高度（文档高度）
if(scrollheight + clientheight > pageheight) {
getdata();//获取ajax数据
}
}
下面复习一下知识点：
一、查看滚动条的滚动距离
js中有两套方法可以查看滚动条的滚动距离
(1)window.pagexoffset/window.pageyoffset 查看滚动条横轴和纵轴的滚动距离；但ie8以及以下的版本不兼容
(2)针对ie，有了第二种方法：
document.body.scrollleft/doucment.body.scrolltop
document.documentelement.scrollleft/document.documentelement.scrolltop
虽然ie可以使用这两个方法，但是这两个方法不仅仅是ie才可以使用。
这里要说明的是，这两种方法要一起使用，因为浏览器的兼容性问题，有的浏览器是document.body有值，有的是document.documentelement有值，但是所有的浏览器都只有一个有值，不会两个都有或者一个都没有，而且这里的没有值不代表是null，而是0，因此我们使用的时候一般都是两个一起使用。
针对兼容性的问题，我们现在就可以封装一个函数，求滚动条滚动距离的方法。
function getscrolloffset(){
if(window.pagexoffset) {
return {
x: window.pagexoffset,
y: window.pageyoffset
}
}
return {
y: document.body.scolltop + document.documentelement.scrolltop,
x: document.body.scrollleft + document.documentelement.scrollleft;
}
当浏览器不是ie的时候，可以直接使用window.pagexoffset和window.pageyoffset的方法，当没有这两个的时候，我们才需要来计算。
二、查看视口的尺寸
注：视口就是我们的可视区，因为我们改变浏览器的大小的时候会改变可视区的大小
有两种方法查看视口尺寸
（1）window.innerheight/window.innerwidth；这个方法可以直接获取到当前可视区的宽高，但是依然很遗憾的是ie8以及以下的版本不兼容。
（2）这个时候就需要第二套方法了：
在标准模式下，doucment.documentelement.clientwidth/document.documentelement.clientheight 在任何浏览器都兼容。
在怪异模式（混杂模式）下，document.body.clientwidth/document.body.clientheight才能查看视口大小，而不能使用上面标准模式下的方法。
• 什么是怪异模式和标准模式呢？
浏览器的渲染模式有两种：标准模式和怪异模式。我们常用的是标准模式，怪异模式是防止浏览器升级版本过高对后面版本你的代码不兼容，让浏览器可以向后兼容其他低版本的代码的法规则，比如ie6的怪异模式下可以兼容ie5个ie4的语法。
• 我们如何变成怪异模式呢？
其实很简单，只需要把我们html代码的第一行的<!doctype html>去掉就可以变成怪异模式了，而加上这一行代码就可以变成标准模式。
• 如何判断怪异模式还是标准模式？
document上中有一个方法叫做compatmode，当浏览器处于怪异模式的时候会返回字符串“backcompat”，在标准模式下可以返回“css1compat”，通过这个方法我们就可以判断了。
知道了什么是标准模式和怪异模式以及如何判断的情况下，我们就可以封装一个兼容性的函数，返回浏览器的视口大小。
function getviewportoffset () {
if(window.innerwidth) {
return {
w: window.innerwidth,
h: window.innerheight
}
}
if(document.compatmode == 'css1compat') {
return {
w: document.documentelement.clientwidth,
h: document.documentelement.clientheight
}else {
return {
w: document.body.clientwidth,
h: document.body.clientheight
}
}
}
三、查看元素尺寸
（1）dom.getboundingclientrect()
在获取的dom元素上，有一个getboundingclientrect方法，这个方法可以获取到元素的宽高和左上点的位置以及有下点的位置（width、height、top、left、right、bottom），注意这里的宽高是指除去了margin的盒子模型的宽高。
但是老版本的ie浏览器没有实现width和height，那么我们在老版本的ie计算宽高的时候就需要用bottom-top和right-left来计算宽高值了。
还有一点需要注意的是，这里的宽高也不是实时更新的，数据只是一个副本。
我们依然可以封装一个函数，可以返回元素的宽高。
element.getelementoffset() {
var objdata = this.getboundingclientrect();
if(objdata.width) {
return {
w: objdata.width,
h: objdata.height
}
}else {
return {
w: objdata.right - objdata.left,
h: objdata.bottom - objdata.top
}
}
}
（2）domele.offsetwidth/dom.offsetheight
虽然前面有一个ele.getboundingclientrect()方法，但是由于这个方法名字是在太长了，因此用的并不是非常多，相比较而言，这两个dom元素的属性用的更多一些。
这里获取的宽高值和上面的一样，都是除去margin后的盒子模型的宽高
四、查看元素的位置
dom.offsetleft/dom.offsettop这两个值分别是元素距离左侧和上侧的距离，这里的值是相对于有定位的父级而言的，如果没有有定位的父级的话，才是相对于文档的坐标。
那么现在就来了一个问题：如何找到有定位的父级呢？
domele上面还有一个属性是offsetparent，这个属性可以查看到元素的有定位的父级，如果没有的话就会返回body，而body的offsetparent则是null。
我们利用上面的信息，可以来封装一个函数，求元素的相对于文档的坐标。
element.prototype.getposition = function (){
if (!this.offsetparent){
return {
"w": this.offsetleft,
"h": this.offsettop
}
}
var width = this.offsetleft,
height = this.offsettop,
ele = this.offsetparent;
while (ele.offsetparent){
width += this.offsetparent.offsetleft;
height += this.offsetparent.offsettop;
ele = ele.offsetparent;
}
return {
"w": width,
"h": height
}
}
五、滚动条滚动
让滚动条滚动的方法有三个：scroll、scrollto、scrollby；这三个方法都有两个参数，分别是x值和y值。
前两个方法的作用一模一样，都是让滚动条滚动到（x，y）的位置，但是最后一个scrollby有一些区别，它是让滚动条相对于上一个位置滚动多少距离。
我们可以简单的用这个方法来实现一个自动阅读的功能：
setinterval(function () {
scrollby(0, 10);
},50);
下一篇： html注册表