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

Question

我有一个类似于下面定义的ul：

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

我在 JavaScript 中使用 jQuery 向此 ul 添加 li 项：

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

我希望我的ul能够自动滚动到div的底部，当添加了很多li项并且ul超过了其定义的高度时

我尝试过以下方法:

1. 在CSS中设置了max-height和overflow-y:scroll以便于ul滚动
2. 在Javascript中执行了$("mylist li").last().focus();

- Rajesh

---

你有查看这个链接吗？ - Yatin Mistry

如果有帮助，请查看此jsfiddle。 - Yatin Mistry

Answer 1

点击这个JS fiddle。它会对你有所帮助。

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

- Emipro Technologies Pvt. Ltd.

---

稍微清晰一些：var list = $("#mylist"); $('.add').click(function(){ list.append("

测试

").animate({scrollTop: list.prop("scrollHeight")}, 500); }); - Richard Lovell

Answer 2

这也可以在原生JS中完成，无需 JQuery：

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

<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>

- Eduard Florinescu

Answer 3

我已经使用了jQuery的animate函数来实现平滑滚动。我只是向ul添加了一些元素，然后滚动到最后一个ul下的li元素。

JS代码：

$(function () {
  $("#mylist").append("<li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li>");
  $('div').animate({
    scrollTop: $("#mylist li").last().offset().top
  },
    'slow');
});

HTML 代码:

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

JSFiddle 实时演示:http://jsfiddle.net/dreamweiver/0Lofm4mL/1/

这是一个链接，可以在 JSFiddle 上查看实时演示。

- dreamweiver

Answer 4

尝试类似以下方式：

$('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>

- Arun P Johny

Answer 5

一个更简单的答案如下：

function setItem(){
    // We go through all items and change the value of the id attribute to empty
    $('#mylist li').each(function (i, v) {
       $(v).attr('id', '');
    });

    // We add the items
    $('#mylist').append('<li id="last">test</li>');

    // Currently there is only one identifier called "last"
    window.location.href = '#last';
}

#mylist{
  overflow-y: scroll;
  height: 100px;
}

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

<button onclick="setItem();">Add</button>
<div id="mylist"></div>

- Jhonatan Martinez

Answer 6

有一种简单的方法可以做到这一点：

container = $('MyElement').get(0);
container.scrollTop = (container.scrollHeight + container.offsetHeight);

- Gokul P