javascript - 检查表行是否在视图中[重复]

Question

我有一个有很多行的table，这个表绑定在一个具有固定高度的div 中，所以我的表有一个滚动条。现在我怎样才能知道哪些行在视图中？

我为每一行分配了唯一的 ID。 我没有使用任何库，所以在纯 JavaScript 和 IE 中寻找解决方案

我在页面上有一个按钮，其 onclick 应该告诉我该行是否在视图中滚动

function check()
{     
var row5 = document.getElementById("r5");
var b = document.getElementById("boundary");            
    if(!NeedThisFunction(row5,b))
        alert("not in view");
    else
        alert("in view");
    }


<button  onclick="check()" >Check</button >    
<div id="boundary" style="overflow:scroll;height:100px">
    <table border="1" >
    <tr id="r1">
    <td>row 1 col1</td>
    <td>row 1 col2</td>
    <td>row 1 col3</td>
    <td>row 1 col4</td>
    </tr>
    ...
    <tr id="r100">
    <td>row 100 col1</td>
    <td>row 100 col2</td>
    <td>row 100 col3</td>
    <td>row 100 col4</td>
    </tr>
    </table>
    </div>

Answer 1

使用How to tell if a DOM element is visible in the current viewport? 接受的答案并对其进行修改，您可以使用如下内容：

function isElementInViewport(par, el) {
    var elRect = el.getBoundingClientRect(),
        parRect = par.getBoundingClientRect();
    return (
        elRect.top >= parRect.top &&
        elRect.left >= parRect.left &&
        elRect.bottom <= parRect.bottom &&
        elRect.right <= parRect.right
    );
}

function check() {
    var container = document.getElementById("boundary"),
        tr = container.getElementsByTagName("tr"),
        visible = [],
        i, j, cur;
    for (i = 0, j = tr.length; i < j; i++) {
        cur = tr[i];
        if (isElementInViewport(container, cur)) {
            visible.push(cur.id);
        }
    }
    console.log("Visible rows:", visible.join(", "));
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    }
}

addEvent(window, "load", function () {
    addEvent(document.getElementById("check_btn"), "click", check);
    addEvent(document.getElementById("boundary"), "scroll", check);
});

演示： http://jsfiddle.net/jpQBU/3/

根据您想要的严格程度，您可以更改比较。就目前而言，该元素必须完全可见。因此，如果您只滚动一个像素太远以至于看不到一行的一小部分，它将不会包括它。