3

我有一个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>
4

1 回答 1

3

使用如何判断 DOM 元素在当前视口中是否可见中已接受的答案？并修改它，你可以使用这样的东西：

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/

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

于 2013-06-08T17:20:22.417 回答