1

追加ボタンをクリックすると、下から上に画像を div に追加しようとしています。現在は機能していますが、私の問題は div がスクロールしないことでした。私が間違っていることは何ですか？

JSFミドルリンク

HTML

 <button id="add_content">Add</button>
 <div class="image_panel"></div>

CSS

  .image_panel {
     width:100%;
     height:300px;
     border:1px solid red;
     overflow-y:scroll;
  }
  #add_content{
     float:left;
  }

JavaScript

$(document).ready(function() {
  var smallimg_count=0;
  var bottom=0;
  $("#add_content").click(function() {
    smallimg_count++;
    bottom=bottom+20;      
    var insert_html_small = '<div id="imageGrid_' + smallimg_count + '"  class="imageGrid_small"  >
                               <img class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="bottom:' + bottom + 'px;" />
                             </div>';
    $(insert_html_small).appendTo(".image_panel");
  });
});
4

3 に答える 3

0

相対位置ではない div 内で、絶対位置の画像を使用しています。

まず、クラスのスタイルに追加position:relative;します.image_panel

ここで気付くのは、画像が div に対して相対的に配置されていることです。スクロールバーをテストしたい場合は、画像の絶対位置ではなく余白を使用することをお勧めします。

お気に入り、margin-top:900px;

CSS

  .image_panel
    {
     width:100%;
     height:300px;
     border:1px solid red;
     overflow-y:scroll;
     position:relative;
     }
   #add_content{
     float:left;
    }

Javascript

        $(document).ready(function(){
var smallimg_count=0;
var bottom=500;
$("#add_content").click(function(){
smallimg_count++;
bottom=bottom+20;      
var insert_html_small = '<div id="imageGrid_' +   smallimg_count + '"  class="imageGrid_small"  ><img   class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="margin-top:' +   bottom + 'px;"    /></div>';
$(insert_html_small).appendTo(".image_panel");
});
});

http://jsfiddle.net/3gzaW/

よろしくお願いします。ジョナス

于 2013-04-16T21:06:17.680 に答える
0

あなたの画像:

<img class="resize1" id="resize_3" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="bottom:60px; position: absolute;;">

position:absolute; を取り除きます。(相対的にするか、完全に削除します)

于 2013-04-16T21:07:30.170 に答える