当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery实现滚动条一直处于最底部

jQuery实现滚动条一直处于最底部

2017年12月21日  | 移动技术网IT编程  | 我要评论

相信大家有时候在展示一些实时数据展示并且数据量很大的时候，因为无法在同一页面看到最有效的数据，所以我们需要将滚动条至于底部，以便我们看到最需要的数据和信息；这里很明显的例子那拿windows的ping来说吧，当我们长ping的时候，这时候数据会越来越多，而且还是累加的，新数据又全部在后面，所以这个时候让滚动条一直处于底部就大有作为了！

大伙可以看一下，在windows的cmd中执行ping 地址 -t，这时候就会一直ping，刚开始的时候，数据可能比较小，同一屏就能看到

vcC01L224KOszazSu8bBuPmxvr7Nzt63qL+0tb2jrLb4x9LX7tPQ0Ke1xMr9vt22vNTa1+6117K/o6zL+dLU1eK49sqxuvLO0sPH06a4w7+0tb21xMrHtdeyv9fuz+u/tLW9tcTK/b7dPC9wPgo8cD48aW1nIHNyYz0="http://img.2cto.com/Collfiles/20140806/20140806090855257.png" alt="\">

只要我们把滚动条处于底部，就达到我们的效果了！！！好啦，不多说了，先给大家看一下小实例，是以textarea和p来做的demo：

这是我们需要的那个模拟的html元素，接下来才是关键：

var count = 1000;
function start(){
	$("#testScroll1").html('');
	$("#testScroll2").html('');
	timeBox = setInterval(function(){
		$("#testScroll1").append('number:['+count+']--->I Love You\n')
		var scrollTop = $("#testScroll1")[0].scrollHeight;
		$("#testScroll1").scrollTop(scrollTop);
		$("#testScroll2").append('number:['+count+']--->I Love You
')
		$("#testScroll2").scrollTop($("#testScroll2")[0].scrollHeight);
		count--;
		if(count == 0){
			clearInterval(timeBox);
			count = 1000;
		}
	},1000);
}

function stop(){
	count = 1000;
	clearInterval(timeBox);
}

demo中的细节没有处理，还有请各位见谅，各位理解意思就行了，总结起来就是一句话：

$("#dom_id").scrollTop($("#dom_id")[0].scrollHeight);

这里提醒一下各位，如果效果没有出来，请注意元素是否超找对了！

展示效果给大伙儿看看：

是我们想要的效果吧！谢谢大家的关注！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网