控制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,一经查实,立即删除!

相关文章

python excel模板 插件_python脚本——自动推送txt,EXCEL等文件模板

#!/usr/bin/python# -*- coding: utf-8 -*- #此处支持中文字符一定要放在前两行&#xff0c;置后的话不生效&#xff0c;脚本报错#!/usr/bin/env pythonimport smtplibfrom email.mime.text import MIMETextimport stringimport timeimport datetimeHOST "mail.xxxxxx.co…

电脑软件:推荐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…

财务系统专用服务器中标公告,东南大学财务处服务器存储-招标办公室.doc

东南大学财务处服务器存储-招标办公室东南大学财务处服务器、存储、防雷系统采购招标公告项目名称&#xff1a;标段一&#xff1a;一卡通数据库生产服务器、一卡通数据库容灾服务器标段二&#xff1a;一卡通系统刀片服务器标段三&#xff1a;一卡通存储设备标段四&#xff1a;一…

Finereport集群配置

增加配置文件cluster.xml 将配置包resource文件夹下的cluster.xml打开&#xff0c;如果没有cluster.xml&#xff0c;则新建一个&#xff0c;基本内容如下&#xff1a; <?xml version"1.0" encoding"UTF-8" ?> <ClusterConfig useCluster"t…

deepin桌面为什么那么卡_deepin因NVIDIA显卡造成开机启动问题:卡在开机logo界面+进入桌面鼠标一直转圈...

写在前面&#xff1a;前两天为了做人工智能的作业&#xff0c;给自己和室友装了一个deepin15.7的系统(我和室友电脑均是NVIDIA显卡)&#xff0c;想着自己装好之后不会出现什么问题&#xff0c;结果错误还是如期而至&#xff0c;无奈&#xff0c;只能自己亲自想办法&#xff0c;…

数据库:MySQL、SqlServer、Oracle对比

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

php 数据库类

<?php /*** 对Yii2数据封装* author nikeyoufumama.com* date 2017-03-08* 抽象类不能被实例化* eg1: selectuse common\models as b_model;$users_model b_model\FactoryModel::users();$users_model->setPk(1);$users_model->setFields(id,name,age,sex);$result …

软件:分享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 打开机箱查…