html - 制表符导致溢出内容向上移动

Question

我有一个已定义高度和溢出设置为隐藏的 div。如果溢出内容中有 anchor ，div 的可见内容将向上移动，这意味着我要显示的内容将被推离 div 的顶部， anchor 将移动到 div 可见部分的中心.没有显示滚动条(好事)，所以内容有点卡在那里。

HTML

<div class="container">
    <div class="show-content">Click in the box and hit tab</div>
    <div class="overflow-content">
        <a href="javascript:void(0);">Pesky Link</a>
        <a href="javascript:void(0);">Pesky Link 2</a>
    </div>
</div>

CSS

.container{
    height: 100px;
    overflow: hidden;
    border: 1px solid black;
}
.show-content{
    line-height: 100px;
    height: 100px;
    font-size: 16px;
}
.overflow-content a{
    display: block;
    margin-top: 40px;
    line-height: 20px;
    font-size: 16px;
}

这是 fiddle 。单击框内并单击选项卡以了解我的意思 http://jsfiddle.net/2seLJ/1/

我的用例是我有一个下拉菜单，其中包含我只想在用户单击“显示下拉列表”时显示的链接。可见内容有一个输入框，因此如果用户从输入框中按 Tab 键，则会显示链接，并且除非在整个页面中用 Tab 键，否则无法返回到输入框。是否只能通过在所有链接中添加 tabindex="-1"来解决？

Answer 1

替代方案

发生这种情况时，应用了 overflow: hidden 的父元素将滚动以将焦点元素置于 View 中，并且 scrollTop 和/或 scrollLeft 属性变为正整数，尽管没有滚动条。

解决这个问题的一种方法，不涉及额外的标记或 DOM 操作，是有一个事件监听器，将 overflow: hidden 父级的滚动位置重置回 0.

jQuery 示例:

$(document).on('focus', '.some-overflow-hidden-element > *', function() {
    $(this).closest('.some-overflow-hidden-element').scrollTop(0).scrollLeft(0);
});

注意:如果您要这样做，请确保您不会在此过程中破坏您的辅助功能。这通常不是最佳选择，因为隐藏的元素仍然可以通过选项卡等方式获得焦点。