Question

首先是我的参考资料

我创建了一些div并将它们放入div容器中。我希望容器总是向下滚动到底部的最新div。

＆＃13;

$(document).ready(function() {

  var container = $("#container");

  var i = 0;

  $("#btn").click(function() {
    i++;

    var div = $("<div></div>");
    div.addClass("d");
    div.html("Container " + i);
    container.append(div);

    container.scrollTop(container.height());
  });
});

＆＃13;

body {
  background: white;
}

#container {
  height: 160px;
  width: 120px;
  overflow-y: scroll;
  background: gray;
}

.d {
  height: 30px;
  margin-bottom: 10px;
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn">-- Add --</button>

<div id="container">

</div>

＆＃13;

正如你所看到的，这很好用，直到我创造超过8个div。然后逻辑将中断，容器不再滚动。

容器应滚动到当前div，其编号为i（当前索引）

Answer 1

仅仅因为高度总是固定，而是考虑使用所有的高度滚动子元素，包括其上/下边距。换句话说，如果没有指定固定高度，容器的高度。

更准确地说，您只需要滚动所有子元素的高度减去容器的固定高度，即溢出部分。这就是您的代码部分工作的原因，因为直到8个元素的溢出低于容器的固定高度（8 * 40 = 320 =＆gt; 320 - 160(fixed height) = 160(overflow)）

＆＃13;

$(document).ready(function() {

  var container = $("#container");

  var i = 0;

  $("#btn").click(function() {
    i++;

    var div = $("<div></div>");
    div.addClass("d");
    div.html("Container " + i);
    container.append(div);

    container.scrollTop(container.find('.d').length * 
                        ($('.d').height() + 10) - 
                        container.height());
  });
});

＆＃13;

body {
  background: white;
}

#container {
  height: 160px;
  width: 120px;
  overflow-y: scroll;
  background: gray;
}

.d {
  height: 30px;
  margin-bottom: 10px;
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn">-- Add --</button>

<div id="container">

</div>

＆＃13;

创建子div时，始终将div容器滚动到底部

1 个答案: