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


    相信大家有时候在展示一些实时数据展示并且数据量非常大的时候,由于无法在同一页面看到最有效的数据,所以我们须要将滚动栏至于底部。以便我们看到最须要的数据和信息。这里非常明显的样例那拿windows的ping来说吧,当我们长ping的时候,这时候数据会越来越多,并且还是累加的,新数据又所有在后面,所以这个时候让滚动栏一直处于底部就大有作为了!

    大伙能够看一下,在windows的cmd中运行ping 地址 -t。这时候就会一直ping,刚開始的时候,数据可能比較小,同一屏就能看到

    但时间一长。数据就越来越多,同一屏根本就无法看到,并且最有效的数据都在最底部,所以这个时候我们应该看到的是底部最想看到的数据


    仅仅要我们把滚动栏处于底部。就达到我们的效果了。!

    。好啦。不多说了,先给大家看一下小实例,是以textarea和div来做的demo:

    <textarea id="testScroll1" style="300px; height: 200px;border: 1px #ccc solid; resize:none;"></textarea>
    <div id="testScroll2" style="300px; height: 200px;border: 1px #ccc solid; overflow-y: scroll;float: left;"></div>
    <input type="button" value="Start" onclick="start();">
    <input type="button" value="Stop" onclick="stop();">

    这是我们须要的那个模拟的html元素,接下来才是关键:

    var count = 1000;
    function start(){
    	$("#testScroll1").html('');
    	$("#testScroll2").html('');
    	timeBox = setInterval(function(){
    		$("#testScroll1").append('number:['+count+']--->I Love You
    ')
    		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);

    这里提醒一下各位,假设效果没有出来,请注意元素是否超找对了。

    展示效果给大伙儿看看:

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

  • 相关阅读:
    nginx的location root 指令
    nginx系统真正有效的图片防盗链完整设置详解
    HttpURLConnection请求接口
    Tomcat:IOException while loading persisted sessions: java.io.EOFException解决手记
    jprofiler安装图解及破解码
    养成好的JAVA编码习惯
    JS函数(自调函数)与闭包【高级函数】
    Java基础加强-(注解,动态代理,类加载器,servlet3.0新特性)
    Intent显示启动与隐式启动
    JSP中四种传递参数的方法
  • 原文地址:https://www.cnblogs.com/brucemengbm/p/6744000.html
Copyright © 2020-2023  润新知