如何向下滚动到动态添加的ul中的最后一个li项目？

Question

我有一个ul定义的喜欢

 <div>
   <ul id="mylist">
   </ul>
 </div>

在我的javascript中,我使用jquery将li项添加到此ul

$("mylist").append("<li>Test</li>");

我希望我的ul自动向下滚动div,当我添加了很多li项目并且ul超过为它定义的高度时

我尝试过的事情:

1. 在CSS中我设置了一个max-height和overflow-y:滚动ul
2. 在Javascript中我做了$("mylist li").last().focus();

Answer 1

点击这个JS小提琴.它会对你有所帮助.

jQuery的:

$('.add').click(function(){
   $("#mylist").append("<li>Test</li>");
   $('#mylist').animate({scrollTop: $('#mylist').prop("scrollHeight")}, 500);
});

HTML:

<div>
  <ul id="mylist"></ul>
  <button class="add">Add li</button>
</div>

CSS:

#mylist {
    width: 100px;
    height: 200px;
    padding: 20px;
    background-color: #eeeeee;
    overflow-y: auto;
}

Answer 2

这也可以在不需要 JQuery 的 Vanilla JS 中完成：

items = document.querySelectorAll(".dummy");
    last = items[items.length-1];
    last.scrollIntoView();

另见下面的片段：

items = document.querySelectorAll(".dummy");
    last = items[items.length-1];
    last.scrollIntoView();

//this adds the new element at the bottom
button = document.querySelector("button")
button.onclick = function() {
list = document.querySelector("#mylist");
var li = document.createElement("li");
li.textContent = "Added with Vanilla JS"
list.appendChild(li);



//this jumps to the last element on the bottom
items = document.querySelectorAll(".dummy");
console.log(items);
last = items[items.length-1];
last.scrollIntoView();
}

#mylist {
  max-height: 200px;
  overflow-y: auto;
}
.dummy {
  min-height: 80px;
  background-color: lightgrey;
}

Answer 3

尝试类似的东西

$('button').click(function() {
  var $last = $("<li>Test</li>").appendTo("#mylist");

  $("#mylist").stop().animate({
    scrollTop: $last.offset().top
  }, '500', 'swing', function() {});
})

#mylist {
  max-height: 200px;
  overflow-y: auto;
}
.dummy {
  min-height: 80px;
  background-color: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Add</button>
<div>
  <ul id="mylist">
    <li class="dummy">Test</li>
    <li class="dummy">Test</li>
    <li class="dummy">Test</li>
    <li class="dummy">Test</li>
    <li class="dummy">Test</li>
  </ul>
</div>