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

Posted 2023-02-21

【中文标题】javascript - 检查表行是不是在视图中[重复]

【英文标题】：javascript - check if table row is in view [duplicate]javascript - 检查表行是否在视图中[重复]

【发布时间】：2013-06-04 18:47:04

【问题描述】：

我有一个有很多行的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>

【问题讨论】：

看起来相似，但那里接受的解决方案对我不起作用:(

您是否包含isElementInViewport 的代码？

@Nitin：你能解释一下什么是有效的吗？你有没有收到错误，或者是什么问题？您遵循了哪个答案（有多个）？如果您只是说“它不起作用”，我们将无法帮助您。

是的，我采用了已接受答案的解决方案，但它总是返回“不在视图中”。答案似乎是将整个窗口作为其视口。

【参考方案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/

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

【讨论】：

错误：tr = container.querySelectorAll("tr") 处的“对象不支持此属性或方法”。我用的是 IE，没有 JS 库

@NitinChaudhari 我明白了，对此感到抱歉。我实际上不确定我为什么使用它......还有另一种方法可以完全满足需要并且在浏览器中得到更好的支持。 IE 8 之前的版本不支持它。您使用的是 IE 7 吗？我会在一分钟内更新答案

谢谢，为我工作。

@NitinChaudhari 太棒了，很高兴你也能正常工作:)

您能否更新解决方案以在滚动结束时记录视图中的行？