Question

我正在尝试为bootstrap创建一个完全样式化的选择字段。我接近完成但我想正确地使控制手柄上下箭头键。如果您使用箭头从菜单的可见部分中驱动所选项目，我希望它滚动到活动项目。

我能找到的大多数关于如何制作这类作品的例子只关心在浏览器视口中。我需要检查一个元素是否在具有溢出集的不同容器元素中可见。

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

我在网站中使用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());
};

元素在可滚动容器中可见

1 个答案: