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

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>

将禁用以下内容：

我怎么知道：

• 可见按钮
• 隐藏的按钮（需要移动滚动以显示它们）
• 用于将滚动条移动到其上的按钮的偏移量。

注意：建议使用JQuery。

Answer 1

要选择按钮，请使用pseudo-selectors：

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

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

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

// offset.top, offset.left

参考：.offset()，:visible，:hidden

Answer 2

试试这个：Check if element is visible after scrolling

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

Answer 3

将容器的width()^(docs)和height()^(docs)与元素的position()^(docs)属性进行比较，同时考虑scrollTop()^(docs)和scrollLeft()^(docs)。

var container = $('#myContainer');
var w = container.width();
var h = container.height();

var el = $('#Button1');
var pos = el.position();
var el_h = el.height();
var el_w = el.width();

container.scroll(function() {
    var st = container.scrollTop();
    var sl = container.scrollLeft();
    if ( pos.top < (h + st) && 
        (pos.top + el_h) > st && 
         pos.left < (w + sl) &&
        (pos.left + el_w) > sl ) { console.log('visible'); }
});

---

编辑：修正了它，以便在滚动超出任一方向的元素时不会将其视为可见。

Answer 4

使用jQuery，你可以使用每个按钮的position（）函数来检查左边75px之后的那些 - 这意味着滚动隐藏了。 position（）是你需要的，而不是offset（），因为你想知道DIV容器中的位置，而不是整个文档中的位置。
顺便说一句，如果你使用一张桌子只是让你的按钮在同一条线上，我建议将它们直接放在DIV中，空格分开，并添加白色空间：nowrap in the style。