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

我有以下代码：

<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。

要选择按钮，请使用

伪选择器

：

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

要知道元素的偏移量，请使用

.offset（）

方法

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

// offset.top, offset.left

参考资料：，

试试这个：

函数是crolledintoview（elem）
{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
return（（elemBottom>=docViewTop）&（elemTop将容器的and与元素的属性进行比较，同时考虑and

var container=$（'myContainer'）；
var w=container.width（）；
var h=container.height（）；
变量el=$（'按钮1'）；
变量位置=标高位置（）；
var el_h=标高高度（）；
var el_w=el.width（）；
container.scroll（函数（）{
var st=container.scrollTop（）；
var sl=container.scrollLeft（）；
如果（位置顶部<（h+st）和
（位置顶部+el_h）>st和
位置左侧<（w+sl）&&
（pos.left+el_w）>sl{console.log（'visible'）；}
});


编辑：修复了它，使其在滚动超过元素的任意方向时都不可见。
使用jQuery，您可以对每个按钮使用position（）函数来检查哪些按钮在左侧75px之后-这意味着滚动会隐藏。position（）是您需要的，而不是offset（），因为您想知道DIV容器中的位置，而不是整个文档中的位置。

顺便说一句，如果您使用一个表只是为了将按钮放在同一行上，我建议将它们直接放在DIV中，用空格分隔，并在样式中添加空格：nowrap。
我看到您已经标记了jquery，这是否意味着您可以使用它？+5作为标记，算作被盗！：）@詹迪：如果你有完整的版权通知和版税，欢迎你使用它
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));
}

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