防止滾動溢出：單擊指向錨點的鏈接時隱藏的元素

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/