javascript - 防止滚动溢出：单击锚链接时隐藏元素

Question

单击链接到达锚点，但即使父元素溢出：隐藏它也会滚动不必要地隐藏内容

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

演示：http: //jsfiddle.net/aj8cX/5/

有没有办法解决这种行为？

Answer 1

这是尽可能接近的，使用table > table-cell：

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

适用于静态内容，但对于动态内容可能会导致一些问题。

Answer 2

你可以使用一些javascript技巧。

我正在使用 jQuery，但你可以使用任何你想要的东西。

$('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

您可以使用 javascript 来获取等高的元素：

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

像这样修复你的CSS：

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

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

工作示例：http: //jsfiddle.net/aj8cX/6/