在包装器div内的视口内获取div

Question

有没有办法获得以下元素：

• 在溢出的div中：滚动
• 在视口中

如下图所示，活动div（5,6,7,8,9）为橙色，其他为绿色（1-4和＆gt; 10）：

我只想让mousewheel事件将“active”类添加到div 5,6,7,8,9（当前在视口中）。查看我的JSFiddle

$('.wrapper').bind('mousewheel', function (e) {
   //addClass 'active' here
});

Answer 1

你可以这样做。我会重新考虑它，但只是为了表明这个概念。

首先，我会将此附加到scroll事件，而不是mousewheel。我们中间有些人喜欢用键盘滚动，你也可以拖动滚动条。 ;）你也有触摸设备的情况。

请注意，我已经在包装器上设置了overflow:auto;，因此没有底部滚动条。

使用底部滚动条，您将不得不忍受它被标记为 in-view 有点早，或者进入跨浏览器计算IE {{1}的世界}。但是代码应该可以作为首发。

»»Fiddle««

clientHeight

请注意，您应该以这样的方式进行重构：每次调用只检索function isView(wrp, elm) { var wrpH = $(wrp).height(), elmH = $(elm).height(), elmT = $(elm).offset().top; return elmT >= 0 && elmT + elmH < wrpH; } $('.wrapper').bind('scroll', function (e) { $('div.box').each(function(i, e) { if (isView(".wrapper", this)) { $(this).addClass('active'); } else { $(this).removeClass('active'); } }); }); 高度，或者在页面加载等时它是静态的。

---

更新; .wrapper的修改版本。考虑到集装箱的位置。这次看着池中的海豚。

»»Fiddle««

isView()