5

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?

3
  • 2
    That's the intended behaviour, for accessibility reasons anyway, to make it possible for those who just use keyboard operate the computer. Aug 29, 2013 at 21:10
  • Maybe you could give the links display: none and then toggle it back when "show dropdown" is clicked.
    – thgaskell
    Aug 29, 2013 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, 2013 at 21:49

2 Answers 2

7

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.

1
  • 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, 2018 at 16:20
6

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/

1
  • 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, 2013 at 21:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.