Question

假设表格中有10行。其中只有5个在屏幕上可见，表示当表加载时，1,2,3,4,5行可见。当我向下滚动1行然后第2行，3,4,5,6可见。在Javascript或jquery中是否有任何方法可以找到屏幕上的第一行？我尝试过可能的方式：

         if(tr.position().top > $(table).position().top)
         {

         }
         else
         {

         }

这里我比较每行的位置和桌面位置。但不幸的是，即使我滚动，每次我都获得相同的位置。怎么做？

Answer 1

使用here中的代码进行一些修改：

JS代码（使用div代替tr）：

$(function () {
    $(window).scroll(function () {
        var first = null; // element at the top

        $("div").each(function(){ // check each div 
            // if it is visivle, and is there is not first element yet,
            if( isScrolledIntoView($(this)) && !first) {
                first = $(this); // this is the first
                first.addClass("seen"); // visual aspect
            }            
            // unnecessary, only for visual
            else
               $(this).removeClass("seen"); // remove class seen (visual)
        });        

    });

    // foreign code
    function isScrolledIntoView(elem) {
        // .....
    }
});

<强> DEMO
^{滚动查看效果}

Answer 2

你可以在滚动事件回调上做这样的事情（使用JQuery），使用超时来限制事件的频率，加上最后找到的可见元素的光标，以便更快地搜索下一个事件。这里＆＃39;这个＆＃39;是你观点的背景：

onScroll: function(e) {
    if (this.scrollEvent) {
        return;
    }

    this.scrollEvent = true;

    setTimeout(function(view) {
        // @replace you should check here is you view still exists using a status on your view context
        if (view.isDestroyed) {
            return;
        }

        view.scrollEvent = false;
        var top = $('youselector on tbody').parent().parent().offset().top;

        if (view.previousTopElement) {
            if (view.previousTopElement.offset().top <= top) {
                // the element is the previous, or on bottom of previous
                var element = view.previousTopElement;
                var i = view.previousTopElementIndex;

                view.previousTopElement = null;

                while (element.length) {
                    if (element.offset().top + element.height() >= top) {
                        // you can uses i + 1 for a 1 based position to display
                        view.previousTopElement = element;
                        view.previousTopElementIndex = i;

                        return;
                    }

                    element = element.next();
                    ++i;
                }
            } else if (view.previousTopElement.offset().top > top) {
                // the element is before the previous
                var element = view.previousTopElement;
                var i = view.previousTopElementIndex;

                this.previousTopElement = null;

                while (element.length) {
                    if (element.offset().top <= top) {
                        // you can uses i + 1 for a 1 based position to display
                        view.previousTopElement = element;
                        view.previousTopElementIndex = i;

                        return;
                    }

                    element = element.prev();
                    --i;
                }
            }
        }

        // no previous, get all rows
        var rows = $('youselector on tbody').children('tr');

        view.previousTopElement = null;
        view.previousTopElementIndex = 0;

        $.each(rows, function (i, el) {
            var element = $(el);

            if (element.offset().top + element.height() >= top) {
                // you can uses i + 1 for a 1 based position to display
                view.previousTopElement = element;
                view.previousTopElementIndex = i;

                return false;
            }
        });
    }, 100, this);   // you can adjust the timeout, pass your view context
}

这是个主意。在我的情况下，我做了这个优化，因为我可以有很多行。

如何在滚动时从表中获取第一个可见行

2 个答案: