滚动条详解及制作（三）

查看元素的几何尺寸

domEle.getBoundingClientRect()

在获取的dom元素上，有一个getBoundingClientRect方法，这个方法可以获取到元素的宽高和左上点的位置以及有下点的位置（width、height、top、left、right、bottom），注意这里的宽高是指除去了margin的盒子模型的宽高。

但是老版本的IE浏览器没有实现width和height，那么我们在老版本的IE计算宽高的时候就需要用bottom-top和right-left来计算宽高值了。

还有一点需要注意的是，这里的宽高也不是实时更新的，数据只是一个副本。

我们依然可以封装一个函数，可以返回元素的宽高。

 1 Element.getElementOffset() {
 2         var objData = this.getBoundingClientRect();
 3         if(objData.width) {
 4               return {
 5                     w: objData.width,
 6                     h: objData.height
 7               }
 8         }else {
 9               return {
10                     w: objData.right - objData.left,
11                     h: objData.bottom - objData.top
12               }
13         }
14   }
15

滚动条滚动

让滚动条滚动的方法有三个：scroll、scrollTo、scrollBy。

这三个方法都有两个参数，分别是x值和y值。前两个方法的作用一模一样，都是让滚动条滚动到（x，y）的位置，但是最后一个scrollBy有一些区别，它是让滚动条相对于上一个位置滚动多少距离。

我们可以简单的用这个方法来实现一个自动阅读的功能：

setInterval(function () {

scrollBy(0, 10);

},50);

另一个查看元素尺寸的方法

dom.offsetWidth/dom.offsetHeight

虽然前面有一个ele.getBoundingClientRect()方法，但是由于这个方法名字是在太长了，因此用的并不是非常多，相比较而言，这两个dom元素的属性用的更多一些。

这里获取的宽高值和上面的一样，都是除去margin后的盒子模型的宽高。

查看元素的位置

dom.offsetLeft/dom.offsetTop

这两个值分别是元素距离左侧和上侧的距离，这里的值是相对于有定位的父级而言的，如果没有有定位的父级的话，才是相对于文档的坐标。

那么现在就来了一个问题：如何找到有定位的父级呢？

domEle上面还有一个属性是offsetParent，这个属性可以查看到元素的有定位的父级，如果没有的话就会返回body，而body的offsetParent则是null。

我们利用上面的信息，可以来封装一个函数，求元素的相对于文档的坐标。

 1  Element.prototype.getPosition = function (){
 2         if (!this.offsetParent){
 3               return {
 4                     “w”: this.offsetLeft,
 5                     “h”: this.offsetTop
 6               }
 7         }
 8         var width = this.offsetLeft,
 9               height = this.offsetTop,
10               ele = this.offsetParent;
11         while (ele.offsetParent){
12               width += this.offsetParent.offsetLeft;
13               height += this.offsetParent.offsetTop;
14               ele = ele.offsetParent;
15         }
16         return {
17               “w”: width,
18               “h”: height
19         }
20   }

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

那么今天要介绍的关于获取dom元素的尺寸以及滚动条相关的知识就这些哟~