javascript - 查找带有滚动条的页面中显示了哪些元素(div)

Question

这是我的页面

<Style>.item{ width :200px ; height:200px ; background-color:red ; float:right ; margin : 10px}</style>

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

这里是完整的代码

http://jsfiddle.net/gup3o1ap/1/

如您所见，页面上有很多 div.item 并且页面有一个大滚动条，我想知道用户看到了哪个 .item ，所以基本上我需要知道最后一个可见的元素在页面上(之前的元素已经显示)

所以我可以计算滚动到页面末尾的时间

$(window).scroll(function() {

   if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
      console.log('at the end' );
   }
});

但我不知道如何找到页面上显示的最后一个元素

Answer 1

http://api.jquery.com/scrolltop/

scrollTop() 为您提供页面上方的高度，因此您可以将其与元素高度和窗口高度一起使用(并进行一些数学运算)来查找已显示的元素。