Question

我想在可滚动的div中计算有多少项可见（包括最后一个可见，即使显示有10px），以便在AJAX回调过渡中为其设置动画。
根据屏幕尺寸，可能会有所不同，我正在寻找检测。

目标是做那样的事情（但我不知道lt（n））

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

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

Answer 1

此代码将执行

    $(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 shown_ requirement。即，甚至0.1被转换为1。

<强>更新
保证金崩溃不会发生：D

Answer 2

计算scroll的父级的宽度（因为在这种情况下这是“视口”）。然后计算从小于计算宽度的位置开始的方框。这仅适用于上述情况。

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

这是demo

计算滚动div中的可见元素

2 个答案: