3

我有一个定义高度和溢出设置为隐藏的 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" 添加到所有链接来解决吗？

4

2 回答 2

7

替代解决方案

发生这种情况时，已应用的父元素overflow: hidden将滚动以将焦点元素放在视图中，并且scrollTopand/orscrollLeft属性变为正整数，尽管实际上没有滚动条。

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

jQuery 示例：

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

注意：如果您要这样做，请确保您没有在此过程中破坏您的可访问性。这通常不是最好的选择，因为隐藏的元素仍然可以通过选项卡之类的东西来聚焦。

于 2014-11-19T21:14:17.737 回答
5

听起来您想阻止该锚点上的制表符行为。请参阅：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 以编程方式对“溢出内容”div 中的所有链接执行此操作：

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

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

于 2013-08-29T21:10:24.320 回答