要素の追加 - 要素がコンテナのオーバーフローを開始したときに追加を停止する

Question

Imは、さまざまなサイズの要素をmasonryを使用して追加することができる「ボード」を整理しようとしています。新しい要素を追加する可能性を止める方法コンテナがいっぱいになり、要素がオーバーフローし始める場合

コード：

HTML

<input id="width" value="0" type="text"></input> 
<input id="height" value="0" type="text"></input> 
<input id="mLeft" value="0" type="text"></input> 
<input id="mRight" value="0"type="text"></input> 
<button>Add container</button> 

jQueryの

$('button').click(function(){ 
    var $pWidth = jQuery("#width").val(); 
    var $truePWidth = $pWidth * 15; 
    var $pHeight = jQuery("#height").val(); 
    var $truePHeight = $pHeight * 15; 
    var $mLeft = jQuery("#mLeft").val(); 
    var $trueMLeft = $mLeft * 15; 
    var $mRight = jQuery('#mRight').val(); 
    var $trueMRight = $mRight * 15; 
    $container.append("<div class='box'><div class='remove'></div></div>").masonry('reload', function(){ 
      $(".box").each(function(i) { 
       $(this).attr("id", "item"+(i+1)); 
      }); 
     $($container).children('.box:last-child').css({'height' : $truePHeight + 'px', 'width': $truePWidth + 'px', 'margin-right' : $trueMRight + 'px', 'margin-left' : $trueMLeft + 'px' }); 
     $container.masonry('reload'); 
    }); 

}); 

要素（■）が追加される容器（変数$コンテナ= #container）は、高い1600pxあります。

ありがとうございます！

/jonas

Answer 1

私はお詫び申し上げます。私は自分の携帯電話上だので、私は、コードを実行することはできませんが、以下のように、あなたは単にコンテナのためのCSSを設定できます

.box { 
    max-height: 1600px; 
    overflow-y: scroll; 
} 

これは、コンテナにスクロールバーを与える代わりのコンテナの中の高​​さを拡大しますユーザーは無制限にボックスを追加することができます。