当隐藏父元素溢出时，阻止选项卡链接：隐藏 [英] Prevent tabbing to link when hidden by parent element with overflow:hidden

问题描述

我有一个可滚动的 div ，里面有一个链接列表。尽管我已经将div设置为 overflow：hidden ，但要隐藏某些链接，在浏览器中切换时仍然可以访问它们。有没有办法避免这种情况，而不使用jQuery？

=falsedata-babel =false>

< div style =height：5rem; overflow：hidden> < UL> < li>< a href =＃>连结1< / a>< / li> < li>< a href =＃>连结2< / a>< / li> < li>< a href =＃>连结3< / a>< / li> < li>< a href =＃>连结4< / a>< / li> < li>< a href =＃>连结5< / a>< / li> < li>< a href =＃>连结6< / a>< / li> < li>< a href =＃>连结7< / a>< / li> < li>< a href =＃>连结8< / a>< / li> < li>< a href =＃>连结9< / a>< / li> < li>< a href =＃>连结10< / a>< / li> < / div>< / div>

解决方案

简短的回答是不，我不知道。这是因为 overflow：hidden; 只是一个视觉修饰符，并不是为了限制功能。这是可用性意图工作的方式。您必须隐藏DOM中的项目功能（ display：none ， visibility：hidden ），通过将各个元素设置为 tabIndex = - 1，将它从 tabIndex 中删除​​。由于CSS无法真正了解隐藏的内容以及jQuery所不具备的功能（psuedo类还没有到此为止），所以jQuery仍然是您最好的选择。

以下是一些很好的额外信息： Tabbing会导致溢出内容转移上涨

I have a scrollable div with a list of links in it. Even though I have set the div to overflow:hidden, to hide some of the links, they are still accessible when tabbing in the browser. Is there a way to prevent this without using jquery?

<div style="height: 5rem; overflow: hidden">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
        <li><a href="#">Link 8</a></li>
        <li><a href="#">Link 9</a></li>
        <li><a href="#">Link 10</a></li>
    </ul>
</div>

解决方案

The short answer is no, not to my knowledge. This is because overflow: hidden; is a visual modifier only and is not intended to limit functionality. That's the way accessibility is intended to work. You must remove the functionality of an item in the DOM by hiding it (display: none, visibility: hidden), disabling it, or removing it from tabIndex by setting the individual elements to tabIndex="-1". Since the CSS can't really tell what is hidden and what isn't like jQuery can (psuedo classes haven't come that far yet), jQuery is still likely your best bet.

Here's some good extra info for you: Tabbing causes overflow content to shift up

这篇关于当隐藏父元素溢出时，阻止选项卡链接：隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！