如何向下滚动到动态添加的ul中的最后一个li项?
How can I scroll down to the last li item in a dynamically added ul?
我有一个像
这样的ul定义 <div>
<ul id="mylist">
</ul>
</div>
在我的javascript中,我使用jquery使用
将li项添加到此ul中$("mylist").append("<li>Test</li>");
我想让我的ul自动向下滚动div到当我添加了很多li项并且ul超过了为它定义的高度
我尝试过的事情:
- 在CSS中,我为ul设置了一个max-height和overflow-y:scroll
- 在Javascript中我做了$("mylist li").last().focus();
点击这个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;
}
这也可以在Vanilla 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>
我使用jQuery animate
来实现平滑滚动。我只是添加一些元素到ul
,然后滚动到ul
下的最后一个li
元素。
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代码:
<div>
<ul id="mylist"></ul>
</div>
现场演示@ JSFiddle:http://jsfiddle.net/dreamweiver/0Lofm4mL/1/
试试
$('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>
一个更简单的答案是:
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>
有一个简单的方法:
container = $('MyElement').get(0);
container.scrollTop = (container.scrollHeight + container.offsetHeight);
相关文章:
- 表追加而不附加最后一个元素
- 无法在Ionic select中预先选择最后一个选项
- 为什么画布形状只在3个画布中的最后一个画布上渲染
- Jquery append oly获取循环Rails中的最后一个elemen
- 如何创建更好的方式来维护基于我的代码访问的最后一个页面
- dataTables-如何自定义分页类型以显示最后一个页码后面的省略号,
- 多维关联数组的最后一个索引
- 无法获取vis.js最后一个或第一个选定的网络节点
- 循环以检查数组中的最后一个图像
- 从输入值中删除最后一个单词
- 尝试使用Javascript正则表达式来获取“&"分隔文本,无论它是否's是最后一个值
- 为什么这个正则表达式不't匹配最后一个字母数字字符
- 如何从多个复选框中获取最后一个值
- 将OnClick函数设置为<ul>,最后一个ul是擦除第一个ul-s
- 使用querySelector()获取最后一个td元素
- Foreach循环只返回最后一个值
- 获得错误的数据值从最后一个li在ul
- 如何向下滚动到动态添加的ul中的最后一个li项?
- 检查<李>是ul中最后一个具有特定类的
- 下拉& # 39;ul # 39;& # 39;李# 39;在附加值之后获取最后一个值