Jquery / Javascript 滚动后查找第一个可见元素

Question

我有以下代码：

<div id="container">
<div class="item" id="1">blah blah</div>
<div class="item" id="2">blah blah 2</div>
</div>

实际上有很多具有class='item'的列表。

基本上，当用户滚动这个很长的项目列表时，我想要改变当前可见项的样式（就像Google阅读器一样！）。已经在jQuery或纯JavaScript中寻找解决方案，但似乎找不到。有人有什么想法吗？

谢谢

马克

- Mark Milford

Answer 1

如果你的元素高度不相同，你可以在滚动时对它们进行迭代：

$(document).scroll(function() {
    var cutoff = $(window).scrollTop();
    $('.item').removeClass('top').each(function() {
        if ($(this).offset().top > cutoff) {
            $(this).addClass('top');
            return false; // stops the iteration after the first one on screen
        }
    });
});

如果这样做速度太慢，你可以把$('.item').offset()缓存到数组中，而不是每次调用offset()。

- kevingessner

---

谢谢，经过小调整很好用，将25的数字添加进去，这样它们就会在接近窗口顶部之前被选中，否则选中的那个会在下一个被选中之前滚动到一半。 - Mark Milford

$('.item').offset()不起作用 - offset将获取匹配元素集中第一个元素相对于文档的当前坐标。 - paraS elixiR

Answer 2

这里还有一种基于内置JavaScript函数的思路。

var range = document.caretRangeFromPoint(0,0); // screen coordinates of upper-left corner of a scolled area (in this case screen itself)
var element = range.startContainer.parentNode; // this an upper onscreen element

这段代码并不是一个可直接使用的产品，它只是一个示例，在仅支持Webkit浏览器的情况下才能正常工作。如果您想使用它，您应该搜索跨浏览器等效的caretRangeFromPoint()。

- Stanislav

Answer 3

你可以使用JavaScript创建自己的滚动条。

这不是非常实用的想法，但你可以尝试一下。

并且将链接放置到更好地描述它的图像上。这将非常有用。

- oneat

---

添加一个实现示例，或者至少一个实现范例或技术，会很有用。更好地描述，例如：您所说的滚动条是什么意思，您将使用哪个库/插件，为什么您不认为这是一个实用的想法等等。 - Luis Masuelli