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/

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

3 个答案: