html jq 实现列表动态添加并自动滚动到底部

最新推荐文章于 2022-04-24 11:46:25 发布

我不开心

最新推荐文章于 2022-04-24 11:46:25 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43887174/article/details/98479833

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html jq 实现列表动态添加并自动滚动到底部

- 实现列表动态添加并自动滚动到底部

实现列表动态添加并自动滚动到底部

自动滚动需要规定parent Div的高度
直接完整代码 , 复制黏贴就可以看到效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动态添加li标签并自动滚动到底部</title>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	</head>
	<style>
		#parent {
			width: 800px; 
			height: 200px;/* 父级div高度必须规定 */
			background: black;
			color: white;
			overflow-y: hidden;
		}
		
		.chlid {
			height: auto;
		}
		
		.chlid li {
			height: 50px;
			width: 500px;
			background: gray;
		}
	</style>

	<body>
		<div id="parent">
			<div id="demoChlid1" class="chlid">
				<ul id="demo">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>		
		</div>
	</body>
	<script>
		var i = 0;
		var interval = setInterval(function() { // 定时添加/json地址并且添加demo div 中
			var parent = document.getElementById('parent');
            var child1 = document.getElementById('demoChlid1');
            var child2 = document.getElementById('demoChlid2');
			i++
			$('#demo').append('<li>动态添加的li:' + i + '</li>')
			setInterval(function () { // 定时判断是否子级div高度是否大于父级div高度
			if(parent.scrollTop >= child1.scrollHeight) {
                   parent.scrollTop = 0;
               } else {
                   parent.scrollTop++;
               }
			},1)
		}, 1000);
	</script>
</html>

我不开心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html jq 实现列表动态添加并自动滚动到底部

html jq 实现列表动态添加并自动滚动到底部自动滚动需要规定parent Div的高度自动滚动需要规定parent Div的高度直接完整代码 , 复制黏贴就可以看到效果<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>动态添加li标签并自动滚动到...
复制链接

扫一扫