jQuery实现滚动栏一直处于最底部
相信大家有时候在展示一些实时数据展示并且数据量非常大的时候,由于无法在同一页面看到最有效的数据,所以我们须要将滚动栏至于底部。以便我们看到最须要的数据和信息。这里非常明显的样例那拿windows的ping来说吧,当我们长ping的时候,这时候数据会越来越多,并且还是累加的,新数据又所有在后面,所以这个时候让滚动栏一直处于底部就大有作为了!
大伙能够看一下,在windows的cmd中运行ping 地址 -t。这时候就会一直ping,刚開始的时候,数据可能比較小,同一屏就能看到
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHVvMjAxMjI3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
但时间一长。数据就越来越多,同一屏根本就无法看到,并且最有效的数据都在最底部,所以这个时候我们应该看到的是底部最想看到的数据
仅仅要我们把滚动栏处于底部。就达到我们的效果了。!
。好啦。不多说了,先给大家看一下小实例,是以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="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\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);
这里提醒一下各位,假设效果没有出来,请注意元素是否超找对了。
展示效果给大伙儿看看:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHVvMjAxMjI3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
是我们想要的效果吧!谢谢大家的关注。
jQuery实现滚动栏一直处于最底部的更多相关文章
- 自己写一个jQuery垂直滚动栏插件(panel)
html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...
- jquery判断滚动到某个div显示底部按钮
判读滚动某个div显示底部按钮 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...
- [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件
本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...
- jQuery高性能自己定义滚动栏美化插件
malihu是一款高性能的滚动栏美化jQuery插件. 该滚动栏美化插件支持水平和垂直滚动栏,支持鼠标滚动,支持键盘滚动和支持移动触摸屏. 而且它能够和jQuery UI和Bootatrap完美的结合 ...
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- jQuery检测滚动条(scroll)是否到达底部
一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数: $(document).height() 获取整个页面的高度 $(window).height() ...
- (转)15个非常棒的jQuery无限滚动插件【瀑布流效果】
原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布 ...
- android 滚动栏下拉反弹的效果(相似微信朋友圈)
微信朋友圈上面的图片封面,QQ空间说说上面的图片封面都有下拉反弹的效果,这些都是使用滚动栏实现的.下拉,当松开时候.反弹至原来的位置.下拉时候能看到背景图片.那么这里简介一下这样的效果的实现. 本文源 ...
- 15个非常棒的jQuery无限滚动插件【瀑布流效果】
现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...
随机推荐
- 配置文件报错:元素类型 "XXX" 必须后跟属性规范 ">" 或 "/>"
这是一个比较常见的配置错误,一般分两步. 有的情况的确是xml文件出现了语法问题,可以让IDE来帮我们检查xml文件是否真的出现了语法错误.把xml内容复制进IDE中,让IDE帮我们检查错误. 如上图 ...
- python中浅拷贝和深度拷贝的区别
在很多面试题中都会问到浅拷贝跟深度拷贝的区别,前几天一个朋友也问到了我浅拷贝跟深度拷贝到底有什么区别,这里就简单举栗子讲一下两者的区别. 浅拷贝(copy()):拷贝父对象,不会拷贝对象的内部的子对象 ...
- 安装zabbix监控系统
环境 操作系统 最小化安装CentOS Linux release 7.2.1511 IP 192.168.88.1 zabbix版本 zabbix-3.4.4.tar.gz zabbix依赖于LNM ...
- 【Go】基础语法之接口
接口定义: 利用关键字interface来定义一个接口,接口是一组方法的集合. 例如: type People interface { Show(name string, age int) (id i ...
- BZOJ 3544 [ONTAK2010]Creative Accounting(set)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3544 [题目大意] 找一段区间使得Σai mod m的值最大. [题解] 首先计算前缀 ...
- [ARC097F]Monochrome Cat
题意:一棵树,每个节点是黑色或白色,你可以从任意节点开始进行一些操作并在任意节点结束,如果当前在$x$,那么一次操作可以是:1.走到相邻节点$y$并翻转$y$的颜色,2.翻转$x$的颜色,问把所有节点 ...
- [转]MySQL更改用户密码
grant all privilegeson *.* to root@'localhost'identified by 'root'with grant option; grant all privi ...
- 8VC Venture Cup 2016 - Final Round D. Preorder Test 二分 树形dp
Preorder Test 题目连接: http://www.codeforces.com/contest/627/problem/D Description For his computer sci ...
- Manthan, Codefest 16 G. Yash And Trees dfs序+线段树+bitset
G. Yash And Trees 题目连接: http://www.codeforces.com/contest/633/problem/G Description Yash loves playi ...
- 2015 百度之星 1003 棋盘占领 dfs
棋盘占领 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://bestcoder.hdu.edu.cn/contests/contest_show ...