判断元素是否在可视区

[keep-run]

判断元素是否在可视区，一般会用到以下函数的一种或者几种：

getBoundingClientRect

getBoundingClientRect这个函数会返回一个对象，这个对象中包含以下几个重要属性：

width     // 当前元素的宽度
height    // 当前元素的高度
left      // 当前元素左边离浏览器窗口左侧的距离，如果由于滚动，
          //  当前元素左侧超出浏览器左侧窗口，则该值为负值；

right      // 当前元素右侧离浏览器窗口左侧的距离
           // 如果由于滚动，当前元素从浏览器左侧完全滑出，则该值为负值，
          // 如果从浏览器右侧滑出，该值不受影响；仍为`left+width`

top        // 当前元素上边缘离浏览器上侧的距离，
           // 如果元素从浏览器浏览器上侧滑出，则该值为负值；

bottom     // 当前元素下边缘离浏览器上侧的距离，
           //  如果元素从浏览器浏览器上侧完全滑出，则该值为负值；
           // 如果从下侧完全滑出，该值不受影响；

具体情况如图所示：

通过以上分析，可以做如下判断：

• top>0时，当前元素一定没有超出浏览器上侧；
• left>0时，当前元素一定没有超出浏览器左侧；

但是 只通过这个元素无法判断元素有没有超出浏览器的下侧和右侧，要判断这两种情况就必须借助视窗的宽高信息；

scrollTop、offsetTop

• scrollTop:MDN上解释为一个滚动元素的顶部到视口顶部的值。该值为正数。如果没有滚动，则该值为0； 这篇文章讲的跟清楚

• offsetTop：一个只读属性，返回当前元素相对于其offsetParent元素的顶部距离，offsetParent元素为包裹该元素的最近的一个定位元素，如果没有定位元素，则为最近的table,table cell或者根元素。