控制DIV内容滚动的方法,实现不用拖滚动条就可以看到最新消息

三种控制DIV内容滚动的方法:


本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加)。

 

QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29LoD19) 



方法一:
使用锚标记要滚动到的位置,然后通过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>

个人公众号谢谢各位老铁支持

本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加)。

 

QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29LoD19) 

 

我的淘宝店,可以进去逛逛噢:https://shop108912636.taobao.com/index.htm?spm=2013.1.w5001-7867000954.3.1d29318dPlLar7&scene=taobao_shop

 

转载于:https://www.cnblogs.com/piwefei/p/5943660.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/270747.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电脑软件:推荐10款实用的办公效率神器

目录 1.Everything 搜索神器 2.IDM 下载器 3.Dism 电脑维护工具 4.Captura 录屏神器 5.Hourglass 倒计时软件 6.Ditto剪切板增强工具 7.Snipaste 截图神器 8.ScreenToGif GIF动态图片录制软件 9.QuickLook文档查看工具 10.processlasso 任务管理 1.Everything 搜索神器 Everyth…

数据库:MySQL、SqlServer、Oracle对比

一、MySQL 优点&#xff1a; 软件体积小、速度快、免费开源&#xff1b; 跨平台&#xff1b; 因为是开源数据库&#xff0c;提供的接口支持多种语言连接操作 &#xff1b; MySQL的核心程序是采用完全的多线程编程。并且是轻量级的进程&#xff0c;它可以灵活地为用户提供服务…

软件:分享9款实用电脑软件,值得看一看

目录 01.ArcTime 02.Luminar 4 03.嗨格式数据恢复大师 04. iTools 05.皮皮直连 06.Kodi 07. PhotoZoom 08.AnyDesk 09.射手影音 今天给大家分享9款实用电脑软件&#xff0c;值得看一看。 01.ArcTime 下载地址&#xff1a;https://arctime.org/ 这是一款特别好用的字幕制作软件。…

怎么转化大小写_亚马逊search term被限制,Search Terms只能写一行怎么办?

search term简称ST&#xff0c; 也叫做亚马逊的关键字&#xff0c;由亚马逊为卖家提供的&#xff0c;除了Title标题&#xff0c;Description描述之外的关键字拓展功能&#xff0c;正确的书写5行描述可以提曝光&#xff0c;流量&#xff0c;和转化.关键字建议包含了客户的具体需…

Idea实现WebService实例 转

作者&#xff1a;http://blog.csdn.net/dreamfly88/article/details/52350370 因为工作需要&#xff0c;数据传输部分需要使用webservice实现&#xff0c;经过两天的研究&#xff0c;实现了一个简单的例子&#xff0c;具体方法如下。 首先需要新建一个项目&#xff0c;如图&…

电脑操作系统维护10条实用建议

目录 1、经常进行“磁盘清理”和磁盘碎片整理” 2、移动internet临时文件和临时交换文件 3、开启wondows xp保留的20%带宽 4、删除不必要的系统声音 5、定期清理internet预读文件 6、关于internet explorer 7、优化硬盘参数 8、让系统自动释放系统资源 9、固定自己的DNS和IP 10…

h5 手风琴效果_小程序-实现折叠面板-手风琴效果

背景无论是在小程序还是 h5 网页,折叠菜单,手风琴是一个非常常见的效果,如今也有很多现成的 UI 组件库已经实现了这一效果的,但有时候在写原生小程序时,单单就是一个折叠菜单效果,却要引入整个 UI 库,有点得不偿失以下就自己手动实现一个的实例效果具体实现如下是wxml示例代码&…

oracle数据库连接 ORA-12638:身份证明检索失败

连数据库的时候突然报了一个这个 查找各种办法&#xff0c;发现自己从10g换成了11g&#xff0c;不过这个没有什么关系&#xff0c;跟oracle的安全设置有关系&#xff0c; 首先从开始菜单找到Net Manager 打开&#xff0c;选择本地&#xff0c;概要文件&#xff0c;下拉列表中选…

IntelliJ IDEA 2021.1更新了好多实用功能介绍

目录 1、WSL 2的支持 2、内置的HTML预览器 3、搜索范围的增强 4、增强的Pull Request支持 5、拆分窗口优化 6、JAVA 16的支持 7、更智能的数据检查 IntelliJ IDEA 2021.1 正式版发布了&#xff0c;这个版本最大的更新内容&#xff0c;就是支持WSL 2和JAVA 16了。而且除了支持WS…

生产三码 黑苹果_黑苹果OC配置工具:OpenCore Configurator v2.15.2.0

一、版本软件版本&#xff1a;OpenCore Configurator 5.15.0.1更新日期&#xff1a;2020年10月14日系统版本&#xff1a;macOS 10.12 Sierra及以上二、OpenCore简介OpenCore是非常优秀的开源软件&#xff0c;旨在通过提供更加通用和模块化的系统来解决Clover带来的限制和问题&a…

电脑硬件常见故障维修技巧

电脑已经成为我们学习日常生活娱乐必不可少的设备了&#xff0c;时间久了难免会遇到小故障&#xff0c;今天我们一起来看下遇到常见的电脑硬件方面的小故障&#xff0c;我们应该如何去自己检测和维修吧。 电脑检测故障我们还是要从电脑的几大硬件开始检查起。 1、CPU 打开机箱查…

gdb查看空指针 linux_5 个鲜为人知 GNU 调试器(GDB)技巧

了解如何使用 gdb 的一些鲜为人知的功能来检查和修复代码。-- Tim Waugh(作者)GNU 调试器 (gdb)是一种宝贵的工具&#xff0c;可用于在开发程序时检查正在运行的进程并解决问题。你可以在特定位置(按函数名称、行号等)设置断点、启用和禁用这些断点、显示和更改变量值&#xff…

盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小

前言 今天来给大家盘点三个JavaScript案例&#xff0c;分别是实现限时秒杀、定时跳转、改变盒子大小案例&#xff0c;一起来看看吧&#xff01; 一、实现限时秒杀案例 1.在淘宝网中&#xff0c;商家为了促销经常搞一些活动&#xff0c;例如限时秒杀是常见的一种活动&#xff0c…

华为的鸿蒙系统是海思_死心了!华为鸿蒙系统首款终端确认,不是手机

欢迎点击上面ZAKER关注5 月底谷歌宣布断供华为。随后&#xff0c;华为 " 秘密 " 研发 7 年的自主产权操作系统鸿蒙被公之于众。随着关于鸿蒙系统的消息越来越多&#xff0c;如鸿蒙系统 2012 年便开始规划、鸿蒙系统在多个国家注册商标等。人们除了佩服华为的未雨绸缪…

网络知识:宽带下载网速是30MB/s,经过路由器后仅10MB/s,看完你就懂了

问题&#xff1a;宽带下载网速本是30MB/s&#xff0c;经过路由器后速度仅10MB/s&#xff0c;这是为什么&#xff1f; 宽带下载测速可以到30MB/s&#xff0c;说明外线和光猫还有电脑是没有问题的。目前家庭的组网基本都是光纤入户了&#xff0c;你的测速瓶颈既然不在光猫&#…