Как сделать прокручиваемый div с динамическим контентом

Question

Я пытаюсь добавить изображение в мой div внутри снизу вверх, когда я нажимаю кнопку добавления. Теперь он работает, но моя проблема заключалась в том, что div не прокручивается. Что я делаю неправильно?

JSFiddle link

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"); 
    }); 
}); 

Answer 1

Один вопрос, который я вижу в том, что изображение, которое вы добавляете имеет абсолютное положение встроенный стиль (от вашего JSFiddle)

например

style="bottom:' + bottom + 'px; position: absolute;' 

Поэтому это в другом контексте стэка, чем DIV

Удаление кажется, чтобы заставить его работать: http://jsfiddle.net/4Ftev/12/

например

$(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" /></div>'; 
     $(insert_html_small).appendTo(".image_panel"); 
    }); 
}); 

Если вы хотите добавить его снизу вверх, то вы можете использовать prependTo, посмотреть JSFiddle

http://jsfiddle.net/4Ftev/15/

$(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" >' + smallimg_count + '<img class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" /></div>'; 
     $(insert_html_small).prependTo(".image_panel"); 
    }); 
}); 

Answer 2

Вы используете изображение с абсолютным расположением, внутри div, которое не является относительным.

Прежде всего, добавьте position:relative; к .image_panel класса стиля

То, что вы заметите, сейчас, является то, что изображение позиционируется относительно дел. Если вы хотите протестировать полосу прокрутки, я бы рекомендовал вам использовать запас вместо абсолютного позиционирования на вашем изображении.

Мол, 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/

Лучшие С уважением. Jonas

Answer 3

Ваши изображения:

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

Отнимите позиция: абсолютная; (сделать его относительным или полностью удалить)