标签导致溢出内容向上移动

时间:2013-08-29 21:04:42

标签: html css

我有一个定义高度的div和溢出设置为隐藏。如果溢出内容中有锚点,div的可见内容将向上移动,这意味着我想要显示的内容将被推离div的顶部,锚点将移动到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;
}

这是小提琴。在框内单击并单击选项卡以查看我的意思 http://jsfiddle.net/2seLJ/1/

我的用例是,我有一个下拉菜单,其中包含我只想在用户点击“显示下拉列表”时显示的链接。可见内容有一个输入框,因此如果用户从输入框中选择标签,则会显示链接,并且无法返回到输入框,而不会显示整个页面的标签。只能通过向所有链接添加tabindex =“ - 1”来解决这个问题吗?

2 个答案:

答案 0 :(得分:5)

听起来你想要阻止该锚点上的tabstop行为。请参阅:Prevent tabstop on A element (anchor link) in 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);" tabindex="-1">Pesky Link</a>
        <a href="javascript:void(0);" tabindex="-1">Pesky Link 2</a>
    </div>
</div>

小提琴:http://jsfiddle.net/2seLJ/2/

替代地

您可以使用jQuery以编程方式为“overflow-content”div中的所有链接执行此操作:

$(document).ready(function(){
    $('div.overflow-content a').attr('tabindex', '-1');
});

小提琴:http://jsfiddle.net/2seLJ/3/

答案 1 :(得分:5)

替代解决方案

发生这种情况时,已应用overflow: hidden的父元素将滚动以将焦点元素置于视图中,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);
});

注意:如果您要这样做,请确保您没有在此过程中破坏您的辅助功能。这通常不是最佳选择,因为隐藏元素仍然可以通过tab等方式进行聚焦。