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

时间:2011-01-24 16:27:06

标签: javascript jquery html

我有以下代码:

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

将禁用以下内容:

enter image description here

我怎么知道:

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

注意:建议使用JQuery。

4 个答案:

答案 0 :(得分:1)

要选择按钮,请使用pseudo-selectors

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

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

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

// offset.top, offset.left

参考:.offset():visible:hidden

答案 1 :(得分:1)

试试这个: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));
}

答案 2 :(得分:1)

将容器的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'); }
});

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

答案 3 :(得分:0)

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