scrollTop、offsetTop、页面视口高度的使用情景

我们在做项目过程中，经常会遇到一个需求就是，观察滚动元素中的某个子元素是否在展示窗口内，或者更具体一点，处在展示窗口的何处。这个时候，我们会用到滚动元素的scrollTop、offsetTop等属性。现在介绍这些属性的用法：

一、滚动元素在其所在的展示窗口中被卷去的高度(滚动条的垂直位置)－scrollTop

展示窗口可以是一个普通的DOM元素，也可以是浏览器窗口。这个窗口必须是有固定高度的，不然，里面的元素也就谈不上滚动不滚动了。

有一点需要注意的，也是初学者容易产生迷惑的地方，就是虽然是展示窗口内部的元素在滚动，按照理解应该是求内部滚动元素的卷去高度scrollTop，监听事件也应该监听内部滚动元素的scroll事件，然而，事实上，应该是考虑到，展示窗口内的元素不止有一个，在设计API时，scrollTop和scroll事件都是针对外部展示窗口的。

假设外部展示窗口的id为scrollwindowEle，那么，它的内部元素的被卷去的高度为：

原生js：document.getElementById("scrollwindowEle").scrollTop

jquery：$("#scrollwindowEle").scrollTop()

假设外部展示窗口是整个浏览器，那么它的内部元素被卷去的高度或者滚动条的位置为：

原生js：document.scrollingElement.scrollTop

jquery：$(window).scrollTop(); 注意window不加引号。

二、元素距离其包裹元素的高度－offsetTop

这个属性指的是此元素上边框距离其包含元素的内边框的距离。我们在项目中，经常会遇到求得某个元素具体页面顶部的距离的需求，这个时候，就需要将offsetTop循环相加，ele.offsetTop + ele.offsetParent.offsetTop + ele.offsetParent.offsetParent.offsetTop.....;

jquery为元素提供了一个offset方法，此方法可以返回元素距离文档也就是距离body顶部的距离，方便了我们的操作。

三、viewportHeight－视口高度（页面展示区），去除浏览器的导航栏和工具栏

这个其实用到了元素的客户区的概念，指的是元素内容及其内边距占据的空间大小，不包含边框、外边距以及滚动条的空间。那么把这个知识点用到整个页面上，其实整个html中，只有body是可见的，且body的客户区大小就是我们通过浏览器看到的，所以，可以使用document.documentElement或者document.body（IE7以前）的clientWidth和clientHeight来表示视口的宽度和高度。而兼容各种浏览器的写法为：

function getViewport(){    if(document.compatMode == "BackCompat"){        return {            width: document.body.clientWith,            height: document.body.clientHeight        };    }else{        return {            width: document.documentElement.clientWidth,            height: document.documentElement.clientHeight        }    }}

四、总结：

scrollTop、offsetTop都是针对某个元素的，它是某个元素的属性。计算的是某个元素的值，另外，还有一点需要注意的是，当我们遇到需要监听元素的scroll事件时，不要在事件回调里做过多的逻辑操作。如果需要当目标元素出现在视口范围内再做一定操作时，不要写死元素距离页面顶部的距离，最好实时计算目标元素距离文档顶部的距离，因为，这个距离有可能是会变化的，这样写，能减少后续的改动。