javascript - 当 Div 到达页面底部时停止移动

Question

这里我尝试创建一些新的 Div。当我按下保存按钮时，它会从文本区域获取数据并在添加按钮顶部创建一个新的 div。效果很好。然后我创建更多的 div，添加 按钮到达页面底部。我的需要是，添加按钮应该在到达页面底部时停止。我不想滚动我的页面。我只需要 Created div 应该滚动。不是整个页面。请给一些建议。谢谢。

$('.add-list-button').on('click', function() {
  $('.add-list-button').hide();
  $('.list-create').show();
  document.getElementById("SAVE_LIST").focus();

});




$('.save-list').on('click', function() {
  var listName = $('.list').text();

  if (listName !== "") { //////////////////
    $('.list').html("");
    $('.add-list-button').hide();
    $('.list-create').show();
    document.getElementById("SAVE_LIST").focus();

    createNewList(listName);
  }

});

$('.close-list').on('click', function() {
  $('.list-create').hide();
  $('.add-list-button').show();
  $('.list').html(""); ////////////////////////////////

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<div class="create-list" id=L IST style="display: inline-block; width: 250px;  background-color: #e2e4e6; border-radius: 3px; margin-left: 10px; margin-top: 40px; ">

  <div class="add-list-button">
    <b> Add </b>
  </div>

  <div class="list-create" style="display: none; min-height: 80px; border-radius: 3px;  background-color: #e2e4e6;  ">

    <div class="list" id="SAVE_LIST" style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ffffff; margin-top: 5px; " contenteditable="true" data-placeholder="Add"></div>

    <div style="width: 250px; height: 35px; margin-top: 5px;">
      <input class="save-list" type="button" value="Save" style="cursor: pointer; width: 60px; height: 30px; background-color: gray; border-color: gray; margin-left: 10px; border-radius: 3px; vertical-align: top;">

      <img class="close-list" src="public/media/images/icons/cls.png" width="27" height="27" style="cursor: pointer; margin-top: 3px; margin-left: 5px;">

    </div>

  </div>

</div>

Answer 1

为您的列表项提供一个容器类，如下所示；

<div class="listcontainer">
//items
</div>

通过一些样式设置，只要内容大小超过其大小，容器就应该滚动。

.listcontainer{height:200px;display:block}