新增加的内容是如何将div的scrollbar自动移动最下面


Posted in Javascript onJanuary 02, 2014

有时候我们在做动态增长的div时,一般都是将内容append到div的最下面,但这会带来一个比较蛋疼的问题,那就是新增加的内容会被遮在最下面,比如这样
新增加的内容是如何将div的scrollbar自动移动最下面
如何才能让scrollbar自动移动最下面呢,这就需要js的帮助了,假设div的id为myDiv,那么使用原生的js实现如下:

var myDiv = document.getElementById('myDiv');  
myDiv.scrollTop = myDiv.scrollHeight;

如果使用jquery的话,也很简单
var $div = $('#myDiv');  
$div.scrollTop($div[0].scrollHeight);
Javascript 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
jquery处理json对象
Nov 03 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 #Javascript
JS脚本defer的作用示例介绍
Jan 02 #Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 #Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 #Javascript
ParseInt函数参数设置介绍
Jan 02 #Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 #Javascript
JavaScript中Math对象方法使用概述
Jan 02 #Javascript
You might like
ThinkPHP模型详解
2015/07/27 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
javascript闭包的理解
2015/04/01 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
详解如何较好的使用js
2016/12/16 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python3.6的venv模块使用详解
2018/08/01 Python
wxpython绘制圆角窗体
2019/11/18 Python
python实现指定ip端口扫描方式
2019/12/17 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
感恩祖国演讲稿
2014/09/09 职场文书
党员评议个人总结
2014/10/20 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
小学班级口号大全
2015/12/25 职场文书
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js