新增加的内容是如何将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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
几种tab切换详解
Feb 03 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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
常用PHP框架功能对照表
2014/10/23 PHP
php学习笔记之面向对象
2014/11/08 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python实现泊松图像融合
2018/07/26 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python多线程与多进程及其区别详解
2019/08/08 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
导游词之包公祠
2019/11/25 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers