Tabbing causes overflow content overflow

Question

I have a div with a specific height and overflow set to hidden. If there are anchors in the overflow content, the visible content of the div will shift, which means that the content I want to show will be shifted from the top of the div, and the anchor will move to the center of the visible part of the div, No scrollbars (good thing), so the content not 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 field and click the tab to see what I mean http://jsfiddle.net/2seLJ/1/

My use for this is that I have a drop-down menu with links that I want to show only when the user clicks the "show drop-down menu" button. Visible content has an input field, therefore, if user tabs from the input window show links, and there is no way to return to the input window, which does not contain tabs throughout the page. Can this be solved by adding tabindex = "- 1" to all links?

Answer 1

It looks like you want to prevent the behavior of tabstop on this anchor. See So: Prevent tabstop on an element (anchor) 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/

As an alternative

You can use jQuery to do this programmatically for all links inside a div-over-content div:

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

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

Answer 2

Alternative solution

When this happens, the parent element with overflow: hidden attached will scroll to place the focused element in the field of view, and the scrollTop and / or scrollLeft will become a positive integer, despite the fact that there is no scroll bar.

One way to solve this problem that does not require additional markup or DOM manipulation is to have an event listener that resets the scroll position of the overflow: hidden parent back to 0 .

JQuery example:

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

NOTE. . If you are going to do this, make sure that you do not destroy your availability in this process. This is usually not the best option, since hidden elements can still be focused on things like a tab.