我们在做项目过程中,经常会遇到一个需求就是,观察滚动元素中的某个子元素是否在展示窗口内,或者更具体一点,处在展示窗口的何处。这个时候,我们会用到滚动元素的scrollTop、offsetTop等属性。现在介绍这些属性的用法:
一、滚动元素在其所在的展示窗口中被卷去的高度(滚动条的垂直位置)-scrollTop
展示窗口可以是一个普通的DOM元素,也可以是浏览器窗口。这个窗口必须是有固定高度的,不然,里面的元素也就谈不上滚动不滚动了。
有一点需要注意的,也是初学者容易产生迷惑的地方,就是虽然是展示窗口内部的元素在滚动,按照理解应该是求内部滚动元素的卷去高度scrollTop,监听事件也应该监听内部滚动元素的scroll事件,然而,事实上,应该是考虑到,展示窗口内的元素不止有一个,在设计API时,scrollTop和scroll事件都是针对外部展示窗口的。
假设外部展示窗口的id为scrollwindowEle,那么,它的内部元素的被卷去的高度为:
原生js:document.getElementById("scrollwindowEle").scrollTop
jquery:$("#scrollwindow