Javascript 如何向下滚动到动态添加的 ul 中的最后一个 li 项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31716529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I scroll down to the last li item in a dynamically added ul?
提问by Rajesh
I have a ul defined like
我有一个 ul 定义如下
<div>
<ul id="mylist">
</ul>
</div>
In my javascript I add li items to this ul with jquery using
在我的 javascript 中，我使用 jquery 向这个 ul 添加 li 项目
$("mylist").append("<li>Test</li>");
I want my ul to automatically scroll down the div to when I have added a lot of li items and ul surpass the height defined for it
当我添加了很多 li 项目并且 ul 超过为其定义的高度时，我希望我的 ul 自动向下滚动 div
Things I have tried:
我尝试过的事情：
- In CSS I set a max-height and overflow-y:scroll for the ul
- In Javascript I did $("mylist li").last().focus();
- 在 CSS 中，我为 ul 设置了 max-height 和 overflow-y:scroll
- 在 Javascript 我做了 $("mylist li").last().focus();
回答by Emipro Technologies Pvt. Ltd.
Click this JS fiddle. It will help you.
单击此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:
css：
#mylist {
width: 100px;
height: 200px;
padding: 20px;
background-color: #eeeeee;
overflow-y: auto;
}
回答by Eduard Florinescu
This can be done also in Vanilla JS no need for JQuery:
这也可以在不需要 JQuery 的 Vanilla JS 中完成：
items = document.querySelectorAll(".dummy");
last = items[items.length-1];
last.scrollIntoView();
See also snippet below:
另见下面的片段：
//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>回答by dreamweiver
I have used jQuery animateto function smooth scrolling. Im just adding few elements to the uland then scrolling to the last lielement under ul.
我使用 jQueryanimate来实现平滑滚动。我只是向 中添加了几个元素ul，然后滚动到 下的最后一个li元素ul。
JSCode:
代码：
$(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 Code:
HTML代码：
<div>
<ul id="mylist"></ul>
</div>
Live Demo @ JSFiddle :http://jsfiddle.net/dreamweiver/0Lofm4mL/1/
现场演示@JSFiddle：http: //jsfiddle.net/dreamweiver/0Lofm4mL/1/
回答by Arun P Johny
Try something like
尝试类似的东西
$('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>回答by Jhonatan Martinez
A much simpler answer is the following:
一个更简单的答案如下：
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>回答by Gokul p
There is one simple way to do this:
有一种简单的方法可以做到这一点：
container = $('MyElement').get(0);
container.scrollTop = (container.scrollHeight + container.offsetHeight);
