【转载】让DIV的滚动条自动滚动到最底部的3种方法
转载自：脚本之家 → 网络编程 → JavaScript → javascript技巧 → 让DIV的滚动条自动滚动到最底部的3种方法(推荐)
http://www.jb51.net/article/93425.htm
方法一：
使用锚标记要滚动到的位置，然后通过click方法模拟点击滚动到锚所在位置
<script language="javascript1.2" type="text/javascript">
function onGetMessage(context)
{
msg.innerHTML+=context;
msg_end.click();
}
</script>
<div style="width:500px;overflow:auto">
<div id="msg" style="overflow:hidden;width:480px;"></div>
<div><a id="msg_end" name="1" href="#1"> </a></div>
</div>
方法二：
利用DIV的scrollIntoView方法，将最底端滚动到可视位置 [list=1]<script
language="javascript1.2"
type="text/javascript">
function onGetMessage(context)
{
msg.innerHTML+=context;
msg_end.scrollIntoView();
}
</script>
<div style="width:500px;overflow:auto">
<div id="msg" style="overflow:hidden;width:480px;"></div>
<div id="msg_end" style="height:0px; overflow:hidden"></div>
</div>
方法三：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="滚动条, scrollbar, 页面底部, 聊天窗口, " />
<meta name="description" content="有些时候（如开发聊天程序），我们需要将将滚动条（scrollbar）保持在最底部，比如聊天窗口，最新发出和收到的信息要显示在最 下方，如果要看到最下方的内容，就必须保证滚动条保持在最底部。" />
<title>将滚动条（scrollbar）保持在最底部的方法 - 滚动条, scrollbar, 页面底部, 聊天窗口, </title>
</head>
<body>
<div id="example">
<h3 id="example_title">将滚动条（scrollbar）保持在最底部的方法</h3>
<div id="example_main">
<!--************************************* 实例代码开始 *************************************-->
<script type="text/javascript">
function add()
{
var now = new Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
div.scrollTop = div.scrollHeight;
}
</script>
<span class="notice">请点击“插入一行”按钮，插入最新信息，当出现滚动条时，滚动条将自动保持在底部。</span><br />
<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;">
</div>
<input type="button" value="插入一行" οnclick="add();">
<!--************************************* 实例代码结束 *************************************-->
</div>
</div>
</body>
</html>
以上就是小编为大家带来的让DIV的滚动条自动滚动到最底部的3种方法(推荐)的全部内容了，希望对大家有所帮助，多多支持脚本之家~
【转载】让DIV的滚动条自动滚动到最底部的3种方法相关推荐
- DIV滚动条自动滚动到最底部的两种方法
查看原文 方法1 function updateScroll(){var element = document.getElementById("divId");element.sc ...
- js 滚动条自动滚动到最底部
<div id="box"><div>内容1</div><div>内容1</div><div>内容1< ...
- 点击li,ul滚动条自动滚动到顶部，怎么解决分享。el-tooltip的focusing不要display：none,隐藏就行
点击li,ul滚动条自动滚动到顶部,怎么解决分享.el-tooltip的focusing不要display:none,隐藏就行
- div内容超出自动滚动
情况一: 1.要求:div内容超出自动滚动,鼠标进入停止滚动 2.效果: 3.代码(vue) <template><div class='container'><div ...
- html实现自动滚动,js实现滚动条自动滚动
本文实例为大家分享了js实现滚动条自动滚动的具体代码,供大家参考,具体内容如下 效果类似于直播网站的评论,会一条接着一条向上 go out : js部分很简单:通过控制scrolltop的值来实现自动 ...
- JS控制滚动条的位置 JS控制TextArea滚动条自动滚动到最下部
S控制滚动条的位置 window.scrollTo(x,y); 竖向滚动条置顶 window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.bod ...
- php文本框自动补全,PHP自动补全表单的两种方法
效果图: 第一种:从数据库中检索之后补全 第二种:邮箱等纯前端的补全 先说第二种,使用开源的插件,所以相对简单. github上面的项目 completer. https://github.com/f ...
- datagridview滚动条自动滚动_掘金上摸鱼的新发现，无限滚动(infinitescroll)
前言 上班摸鱼,下班摸鱼,一直摸一直爽.在一次调试的过程中,我按下了F12刚好是掘金的页面,然后把代码输入到控制台之后,顺手滚动了几下右侧的滚动条,发现个问题如下图所示: 掘金官网 ...
- html div 自动滚动到底部,javascript让DIV的滚动自动滚动到最底部-4种方法
要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...
最新文章
- 使用ASP.NET Atlas开发随输入内容自动调整行数的textarea
- Everyday a English
- 为什么使用lambda表达式
- Python绘制具有描边效果和内部填充的柱状图
- [CSS3] touch-action设置移动端拖动行为
- 推荐一个中文mda网站
- 蔡工RK系列Android驱动开发入门视频课程
- 基于STM32的超声波避障小车
- 用51单片机怎么玩SG90舵机？
- VBA 合并同文件夹下多工作簿中同名工作表到 一工作簿一工作表
- uni-app 167将某人踢出群聊（二）
- osu计算机科学硕士,OSU的Computer Science and Engineering「俄亥俄州立大学计算机科学与工程系」...
- Linux perf 1.4、hardware events
- 大数据算法MOOC笔记1：大数据定义、特点、应用
- Unity3D_Util_Editor_显示RectTransform的世界坐标和相对坐标
- 强烈安利：小顽简报，一款高效实用的PPT新插件
- 机器学习项目三：XGBoost人体卡路里消耗预测
- 不要小瞧你身边那位看起来很“懦弱”的中年人
- [技术讨论]基本共射共集共基放大电路怎么工作，可以来看看
- D. Ela and the Wiring Wizard（最短路径/floyd）