防止滚动溢出：单击指向锚点的链接时隐藏的元素

Question

clicking the link the anchor is reached, but even if the parent element has overflow:hidden it scrolls unnecessarily hiding the contents

<style>
div#x
    {overflow:hidden;border-bottom:1px red solid;}

div#x > div
    {border:1px red solid;padding:10px;float:left;width:33%;box-sizing:border-box;padding-bottom:10000px;margin-bottom:-10000px;}
</style>

<div id="x">
    <div><a href="#test">go to</a><br><br>a</div>
    <div>a<br><br><br><br>a</div>
    <div>a<br><br><br><br><br><br><span id="test">go here</span></div>
</div>

demo: http://jsfiddle.net/aj8cX/5/

is there a way to fix this behavior?

Answer 1

This is as close as I could get, using table > table-cell :

http://jsfiddle.net/mikedidthis/AmNxf/

Would work well for static content, but for dynamic content it may cause some issues.

Answer 2

You could use some javascript trickery.

I am using jQuery, but you can use anything you want.

$('a[href="#test"]').on('click', function(){
    var test_element = $('#test');
    var scroll_top = test_element.scrollTop();
    var max_height = test_element.parent().height();
    if (scroll_top < max_height) { return false; }
    else { return true; } //only scroll if the item is in view
});

Answer 3

You can use javascript to get elements of equal height:

var height = 0;
$.each($('#x div'),function(k,v){
    if($(this).height() > height){
        height = $(this).height();
    }
});
$.each($('#x div'),function(){
    $(this).height(height);
});

Fix your css like so:

div#x
{
    overflow:visible;
    height:10000px;
}

div#x  div
{
    border:1px red solid;
    float:left;
    width:33%;
    box-sizing:border-box;
    margin-right:-1px;
}

Working example: http://jsfiddle.net/aj8cX/6/