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

有时候我们在做动态增长的div时，一般都是将内容append到div的最下面，但这会带来一个比较蛋疼的问题，那就是新增加的内容会被遮在最下面，比如这样

如何才能让scrollbar自动移动最下面呢，这就需要js的帮助了，假设div的id为myDiv，那么使用原生的js实现如下:


代码如下:

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

如果使用jquery的话，也很简单


代码如下:

var $div = $('#myDiv'); 
$div.scrollTop($div[0].scrollHeight);

赞 (0)

相关推荐

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

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

    有时候我们在做动态增长的div时,一般都是将内容append到div的最下面,但这会带来一个比较蛋疼的问题,那就是新增加的内容会被遮在最下面,比如这样如何才能让scrollbar自动移动最下面呢,这就需要js的帮助了,假设div的id为myDiv,那么使用原生的js实现如下: 复制代码 代码如下: var myDiv = document.getElementById('myDiv');  myDiv.scrollTop = myDiv.scrollHeight; 如果使用jquery的话,也很

  • jQuery实现在新增加的元素上添加事件方法案例分析

    本文实例讲述了jQuery实现在新增加的元素上添加事件方法.分享给大家供大家参考,具体如下: 最近项目组需要在新增的元素上增加时间,有人说用live方法后来使用的时候发现jQuery没有该方法(1.7以上就没了)替换为on 除了jquery api官方的例子外还有以下的例子可以在新增的元素上添加事件 $(document).on("click",'#lyysb a',function(){ if(!$(this).hasClass('cur')){ $(this).addClass('

  • PHP5.6新增加的可变函数参数用法分析

    本文实例讲述了PHP5.6新增加的可变函数参数用法.分享给大家供大家参考,具体如下: 今天无事,看了下PHP手册.发现PHP版本更新增加不少东西.下面就说说其中的PHP5.6更新中新增加的可变函数参数. 代码1: function sum(...$numbers) { $acc = 0; foreach( $numbers as $number ) { $acc += $number; } return $acc; } echo sum(1,2,3,4); 代码1结果: 10 代码1解析: 方法

  • 解决django 新增加用户信息出现错误的问题

    Python3.4版本 当我把新增加的用户信息填写完成后,点击保存,然后出现了这样的错误: IntegrityError at /admin/users/userprofile/add/ (1452, 'Cannot add or update a child row: a foreign key constraint fails (`mxonline`.`django_admin_log`, CONSTRAINT `django_admin_log_user_id_c564eba6_fk_au

  • JS把内容动态插入到DIV的实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-

  • jquery让返回的内容显示在特定div里(代码少而精悍)

    前面写过ajax让返回的内容显示在特定div里最近在看jquery,所以又用jquery重新写了个,jquery果然是"写得更少,做得更多" <html> <head> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

  • ThinkPHP3.1新特性之内容解析输出详解

    以往版本的ThinkPHP中页面输出的过程是读取模板文件,然后进行模板解析(也支持调用第三方模板引擎解析),但是有一些情况,我们并没有定义模板文件,或者把模板文件保存在数据库里面,那么这种情况下进行页面输出的时候,我们是无法进行模板文件读取的,ThinkPHP3.1版本则针对这样的情况增加了内容解析输出的功能. 内置的模板引擎也进行了完善,如果传入的模板文件不存在的话,则会认为是传入的模板解析内容,因此,ThinkPHP3.1版的View类和Action类也做了一些相应的改进. display方

  • PHP 7.0新增加的特性介绍

    ?? 运算符(NULL 合并运算符) 把这个放在第一个说是因为我觉得它很有用.用法: $a = $_GET['a'] ?? 1;它相当于: <?PHP $a = isset($_GET['a']) ? $_GET['a'] : 1; 我们知道三元运算符是可以这样用的: $a ?: 1但是这是建立在 $a 已经定义了的前提上. ?? 运算符(NULL 合并运算符) 把这个放在第一个说是因为我觉得它很有用.用法: $a = $_GET['a'] ?? 1; 它相当于: <?php $a = iss

  • 详解java8在Collection中新增加的方法removeIf

    记得我在以前找工作的经历中,遇到过一个面试官问过我一个很基础的问题.问题是:有一个List中有10个元素,我现在想从中删除3个元素,请问怎么做?我当时也没想,就直接说,List的有自带的remove方法,可以直接使用,他说请详细的说明一下,我说写一个for循环,循环的次数是List的长度,然后在循环里面直接删除掉想要删除的元素就可以了. 当时还想,这么简单的问题也问,面试官说,你回去自己试试就知道了,你看按照你说的那样写会不会报错.然后我就懵了,虽然这是个简单的问题但是日常的编码中,我还真没有注

  • JS实现读取xml内容并输出到div中的方法示例

    JS实现读取xml内容并输出到div中的方法示例

    本文实例讲述了JS实现读取xml内容并输出到div中的方法.分享给大家供大家参考,具体如下: note.xml文件结构: <nooo> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note> <n

随机推荐