0

リンクをクリックするとアンカーに到達しますが、親要素にoverflow:hiddenがある場合でも、不必要にスクロールしてコンテンツを非表示にします

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

この動作を修正する方法はありますか?

4

3 に答える 3

1

これは、次を使用して取得できる限り近いものですtable > table-cell。

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

静的コンテンツではうまく機能しますが、動的コンテンツでは問題が発生する可能性があります。

于 2013-07-02T09:07:45.180 に答える
0

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/

于 2013-07-01T16:25:49.673 に答える
0

いくつかの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
});
于 2013-07-01T16:11:56.147 に答える