选项卡会导致溢出内容向上移动 [英] Tabbing causes overflow content to shift up

问题描述

我有一个定义高度和溢出设置为隐藏的div。如果溢出内容中有锚点，则div的可见内容将向上移动，这意味着我想要显示的内容将从div的顶部移开，并且锚点将移动到div的可见部分的中心。没有滚动条显示（好东西），所以内容有点卡住了。

HTML

 < div class =container> 
< div class =show-content>点击框并点击标签< / 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纯黑色; 
} 
 .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添加到所有链接来解决？

解决方案

听起来像是想阻止该锚上的tabstop行为。看到这一点：在HTML A元素（锚链接）防止制表位

 < div class =container> 
< div class =show-content>点击框并点击标签< / div> 
< div class =overflow-content> 
  < / div> 
< / div> 
  

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

或者

您可以使用jQuery以编程方式对overflow-contentdiv内的所有链接执行此操作：

  $（'div.overflow-content a'）。attr（'tabindex'，'-1'）; 
}）; 
  

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

I have a div with a defined height and overflow set to hidden. If there are anchors in the overflow content the visible content of the div will shift up, meaning the content that I want to show will be pushed off the top of the div and the anchor will move to the center of the visible portion of the div. No scrollbars are shown (a good thing) so the content is kind of stuck there.

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;
}

Here is the fiddle. Click inside the box and hit tab to see what I mean http://jsfiddle.net/2seLJ/1/

My use case for this is that I have a dropdown menu with links that I only want to show on when the user clicks 'show dropdown'. The visible content has an input box so if the user tabs from the input box the links are shown and there is no way to get back to the input box short of tabbing through the entire page. Can this only be solved by adding tabindex="-1" to all the links?

解决方案

It sounds like you want to prevent the tabstop behavior on that anchor. See this: 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>

Fiddle: http://jsfiddle.net/2seLJ/2/

Alternatively

You can use jQuery to do this programatically for all links inside "overflow-content" divs:

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

Fiddle: http://jsfiddle.net/2seLJ/3/

这篇关于选项卡会导致溢出内容向上移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！