首页 > 代码库 > jQuery实现滚动条一直处于最底部
jQuery实现滚动条一直处于最底部
相信大家有时候在展示一些实时数据展示并且数据量很大的时候,因为无法在同一页面看到最有效的数据,所以我们需要将滚动条至于底部,以便我们看到最需要的数据和信息;这里很明显的例子那拿windows的ping来说吧,当我们长ping的时候,这时候数据会越来越多,而且还是累加的,新数据又全部在后面,所以这个时候让滚动条一直处于底部就大有作为了!
大伙可以看一下,在windows的cmd中执行ping 地址 -t,这时候就会一直ping,刚开始的时候,数据可能比较小,同一屏就能看到
但时间一长,数据就越来越多,同一屏根本就无法看到,而且最有效的数据都在最底部,所以这个时候我们应该看到的是底部最想看到的数据
只要我们把滚动条处于底部,就达到我们的效果了!!!好啦,不多说了,先给大家看一下小实例,是以textarea和div来做的demo:
<textarea id="testScroll1" style="width:300px; height: 200px;border: 1px #ccc solid; resize:none;"></textarea> <div id="testScroll2" style="width:300px; height: 200px;border: 1px #ccc solid; overflow-y: scroll;float: left;"></div> <input type="button" value=http://www.mamicode.com/"Start" onclick="start();">>这是我们需要的那个模拟的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<br/>') $("#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);
这里提醒一下各位,如果效果没有出来,请注意元素是否超找对了!展示效果给大伙儿看看:
是我们想要的效果吧!谢谢大家的关注!
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。