页面元素滚动真实展现

最近遇到一个情况，页面上存在一个很长的列表，超出了浏览器的高度，也就是说有一部分列表元素是存在于浏览器可视范围之外的，需求是单独针对每一个列表项，当某列表项因为滚动条的滚动而出现在可视范围内时，则记录一次。

---

需求的关键在于监听判断列表项是否出现在浏览器可视范围内，这里为了简化操作，使用了 jQuery库.
元素相对于浏览器可视区域共有三种情况：

1. 向上滚动超出可见区域
2. 向下滚动超出可视区域
3. 在可视区域内

对于上述情况，需要三个高度值来确定：

1. 元素距离页面顶部的距离
   $(".item").offset().top
2. 元素本身的高度
   $(".item").outerHeight()
3. 页面滚动的距离
   $(window).scrollTop()

上述两段结合，得到如下两种元素在可是区域内的结论：

1. 向上滚动超出可见区域
   整个页面滚动的距离 > (元素顶部偏移量 + 元素本身的高度)
2. 向下滚动超出可视区域
   整个页面滚动的距离 < (元素顶部偏移量 - 浏览器可见区域高度)

不符合上述两种情况的，则可以判断元素在可视区域内，初步代码如下：

var $win = $(window);
var itemOffsetTop = $(".item").offset().top;
var itemOuterHeight = $(