Javascript 如何制作具有动态内容的可滚动div_Javascript_Jquery_Html

Javascript 如何制作具有动态内容的可滚动div

javascript jquery html

Javascript 如何制作具有动态内容的可滚动div,javascript,jquery,html,Javascript,Jquery,Html,当我点击add按钮时，我正试图将一个图像从下到上添加到我的div中。现在它正在工作，但我的问题是div不能滚动。我做错了什么 HTML <button id="add_content">Add</button> <div class="image_panel"></div> JavaScript $(document).ready(function() { var smallimg_count=0; var bottom=0;

当我点击add按钮时，我正试图将一个图像从下到上添加到我的div中。现在它正在工作，但我的问题是div不能滚动。我做错了什么

HTML

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

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

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

$（文档）.ready（函数（）{
var smallimg_计数=0；
var-bottom=0；
$（“#添加#内容”）。单击（函数（）{
smallimg_计数++；
底部=底部+20；
var insert_html_small='0
';
$（插入html）。附加到（“.image\u面板”）；
});
});

您使用的是绝对定位图像，位于非相对定位的div内

首先，添加

位置：相对到.image\u面板
类样式
现在您会注意到，图像是相对于div定位的。
如果您想测试滚动条，我建议您在图像上使用边距而不是绝对位置
比如，margintop: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=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");
  });
});

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

$（文档）.ready（函数（）{
var smallimg_计数=0；
var底部=500；
$（“#添加#内容”）。单击（函数（）{
smallimg_计数++；
底部=底部+20；
var insert_html_small=''；
$（插入html）。附加到（“.image\u面板”）；
});
});


致以最良好的祝愿。
Jonas
您使用的是绝对定位图像，位于一个非相对定位的div内
首先，添加位置：相对到.image\u面板
类样式
现在您会注意到，图像是相对于div定位的。
如果您想测试滚动条，我建议您在图像上使用边距而不是绝对位置
比如，margintop: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=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");
  });
});

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

$（文档）.ready（函数（）{
var smallimg_计数=0；
var底部=500；
$（“#添加#内容”）。单击（函数（）{
smallimg_计数++；
底部=底部+20；
var insert_html_small=''；
$（插入html）。附加到（“.image\u面板”）；
});
});


致以最良好的祝愿。
Jonas
我看到的一个问题是，您添加的图像具有绝对位置内联样式（来自您的JSFIDLE）
e、 g
因此，它与div处于不同的堆栈上下文中
移除它似乎可以让它工作：
e、 g
我看到的一个问题是，您添加的图像具有绝对位置内联样式（来自JSFIDLE）
e、 g
因此，它与div处于不同的堆栈上下文中
移除它似乎可以让它工作：
e、 g
您的图像：
<img class="resize1" id="resize_3" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="bottom:60px; position: absolute;;">



拿走位置：绝对；（使其相对或完全删除）
您的图像：
<img class="resize1" id="resize_3" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="bottom:60px; position: absolute;;">



拿走位置：绝对；（使其相对，或将其完全移除）
然后他们不再像现在一样重叠。我改变位置：relative没有像现在那样从下到上重叠。我改变位置：relative没有从下到上重叠，但它是从上到下重叠的。我想从下到上重叠我不知道，我也没有那么多的声誉这仍然没有达到原始代码的要求did：自从OP选择了答案，我已经取消了我的反对票。@isherwood true，但我会让OP把它从there@EranMedan谢谢你宝贵的回答，但这是自上而下的。我想自下而上。我不知道，我也没有那么大的声誉。这仍然没有像原来的代码那样：因为OP选择了答案，我已经删除了我的反对票。@isherwood true，但我会让OP把它从there@EranMedan感谢您宝贵的回答Fiddle没有为我添加图像。#isherwood在单击ADDI后尝试滚动查看，但这并不是OP的目的。：-）我想从下往上添加抱歉，我不明白OP“从下往上添加”的意思。Fiddle没有为我添加图像。#isherwood在单击ADDI后尝试滚动查看，但这不是OP的目的。：-）很抱歉，我不明白OP和“Addbottomtotop”是什么意思。