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);
});

DEMO： http://jsfiddle.net/jpQBU/3/

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

javascript - 检查表行是否在视图中

1 个答案: