Tabbing causes overflow content to shift up

Question

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?

That's the intended behaviour, for accessibility reasons anyway, to make it possible for those who just use keyboard operate the computer. — ninty9notout, Aug 29 '13 at 21:10
Maybe you could give the links `display: none` and then toggle it back when "show dropdown" is clicked. — thgaskell, Aug 29 '13 at 21:32
I originally did that, but since I'm using a CSS animation for the height the links "popped" in only after the animation was complete. That should work otherwise though — JoeyP, Aug 29 '13 at 21:49

score 7 · Answer 1 · edited Jun 20 '20 at 09:12

Alternative Solution

When this happens, the parent element that has overflow: hidden applied will scroll to put the focused element in view, and the scrollTop and/or scrollLeft properties become a positive integer, despite the fact that there is no scrollbar.

One way around this issue, that involves no extra markup or DOM manipulation, would be 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 you are not destroying your accessibility in the process. This is not usually the best option, as the hidden elements can still be focused by things like tab.

excellent thanks! Just needed to add overflow: hidden to prevent my nav tabs from shifting up when being tab focused to! — José Toy, Feb 13 '18 at 16:20

score 5 · Accepted Answer · edited May 23 '17 at 12:24

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/

Yeah, in my OP I meant tabindex="-1" instead of tabindex="0". I was hoping there might be another (css only) way around it where the user could still tab into the links if they were being shown, but the jQuery way should solve the problem. Thanks! — JoeyP, Aug 29 '13 at 21:21

Tabbing causes overflow content to shift up

2 Answers2

Alternative Solution

Alternatively

Linked