javascript - 如何知道控件在带有滚动条的容器中是否可见

Question

我有以下代码:

<div style="overflow: scroll; width: 75px;  background-color: Black; ">
    <table style="background-color: Red">
        <tr>
            <td>
                <input type="button" id="btn1" value="1" />
            </td>
            
            <td>
                <input type="button" id="Button1" value="2" />
            </td>
            <td>
                <input type="button" id="Button2" value="3" />
            </td>
        </tr>
    </table>
</div>

哪些将被禁用，如下所示:

我怎么知道:

• 可见的按钮
• 隐藏的按钮(需要滚动才能显示)
• 将滚动条移动到 Button 的偏移量。

注意:推荐使用JQuery。

Answer 1

要选择按钮，请使用伪选择器:

$('input:button:visible')
$('input:button:hidden')

要知道元素的偏移量，请使用 .offset() 方法。

var offset = $('input:button').offset();

// offset.top, offset.left

引用:.offset() , :visible , :hidden