计算滚动中的可见元素 div

Question

我想计算在可滚动 div 中有多少项目可见（包括最后一个可见的项目，即使显示了 10px）以在 AJAX 回调转换中对其进行动画处理。
根据屏幕尺寸，这可能会有所不同，我正在寻找检测。

目标是做类似的事情（但我不知道 lt(n)）

$(".box:lt(n)")...

示例：
— http://jsfiddle.net/gy4uLu7x/

Answer 1

计算滚动条父项的宽度（因为在本例中是 "viewport"）。然后计算从小于上述计算宽度的位置开始的框。这仅适用于上述情况。

var parentContainerWidth = $(".scroll").parent().width();
var containedBoxesCount = $('.box').filter(function () {
    return $(this).offset().left <= parentContainerWidth;
}).length;
alert(containedBoxesCount);

这是一个demo

Answer 2

这段代码可以

    $(function () {

        var total_width = $(".box").length * $(".box").outerWidth(true);
        $(".scroll").width(total_width);

        var scroll = $('.scroll');
        var viewport_w = scroll.parent().width();
        var box1 = $('.box:first');
        var boxw = box1.outerWidth(true);
        var view_items = Math.ceil(viewport_w/ boxw);
        console.log(boxw, viewport_w, view_items);

     });

此代码适用于所有框的（外部）宽度都相等的事实。它计算 .scroll 的直接父级恰好是 body 元素，并检查有多少元素适合它。它将除法结果的小数部分转换为整数以适应您的 _ 即使显示 10px 的要求。即，即使是 0.1 也会转换为 1。

更新
保证金崩溃不会发生 :D

计算滚动中的可见元素 div

Count visible elements in a scrolled div

javascript

jquery

scroll