javascript - 元素在可滚动容器中是否可见

Question

我正在尝试为 Bootstrap 创建一个完全可样式化的选择字段。我快完成了，但我想让控件正确处理向上和向下箭头键。如果您使用箭头将所选元素移出菜单的可见部分，我希望它滚动到事件元素。

我能找到的大多数关于如何使这样的东西工作的例子只关心在浏览器视口(viewport)中。我需要检查某个元素在设置了溢出的不同容器元素中是否可见。

我目前的尝试导致菜单在需要之前向下滚动，并且永远不会向上滚动以跟随事件元素。

我在站点中使用 jQuery，因此您可以在您的答案中使用它，或者只是普通的 javascript。请不要引用任何额外的库，我希望这是一个简单的解决方案。

$.fn.visible = function(partial, parent){
    var $w              = parent ? $(parent): $(window);
    var $t              = $(this),
        viewTop         = $w.scrollTop(),
        viewBottom      = viewTop + $w.height(),
        _top            = $t.offset().top,
        _bottom         = _top + $t.height(),
        compareTop      = partial === true ? _bottom : _top,
        compareBottom   = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};

jsfiddle example

Answer 1

我找到了一种方法来判断子元素在可滚动父元素中是否可见。这是我想出的 jQuery 函数。

$.fn.visible = function(partial, parent, child){
    var $outer = $(parent);
    var $child = $(child);

    if(partial)
        return ($child.position().top >= 0 && $child.position().top < $outer.height());
    else
        return ($child.position().top - $child.height() >= 0 && $child.position().top + $child.height() < $outer.height());
};