html div 自动滚动到底部,javascript让DIV的滚动自动滚动到最底部-4种方法

要制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。

聊天程序是基于AJAX设计的，没有用框架，消息容器是一个DIV，所以问题就在于如何控制DIV的滚动条。

网上有资料介绍说通过设置scrollTop属性来控制滚动条位置，具体可参见：

方法二：

利用DIV的scrollIntoView方法，将最底端滚动到可视位置 [list=1]function onGetMessage(context) {msg.innerHTML+=context;msg_end.scrollIntoView(); } 《script》

方法三：将滚动条(scrollbar)保持在最底部的方法 - 滚动条, scrollbar, 页面底部, 聊天窗口,

将滚动条(scrollbar)保持在最底部的方法

';p.scrollTop = p.scrollHeight;}《script》请点击“插入一行”按钮，插入最新信息，当出现滚动条时，滚动条将自动保持在底部。

方法4：

这个比较复杂也比较灵活一点，就是利用DIV+JS+图片构造一个滚动条，当然了图片是怎么好看怎么用了。

主要部分就是外层的DIV加个overflow:hidden属性，通过js代码调整内层DIV的margin-left和margin-top来控制内容的滚动，由于上面两种方法已经可以满足需求，所以这种方法没具体做深究，有兴趣的可以试一下

html div 自动滚动到底部,javascript让DIV的滚动自动滚动到最底部-4种方法相关推荐

【javascript基础——系列10】js中隐藏元素的几种方法以及代码
系列文章 [javascript基础--系列1]前端页面ajax连接后台服务器传输数据 [javascript基础--系列2]前端页面axios连接后台服务器传输数据 [javascript基础--系 ...
数组添加元素的方法PHP,JavaScript如何给数组添加元素？js数组添加元素的3种方法（代码实例）...
数组是JavaScrip中中一个比较重要的部分,在学习js数组时,数组元素的操作是不可缺少的部分,那么你知道数组元素如何添加吗?本篇文章就给大家介绍如何往js数组(一维)中添加元素,让大家了解往js数 ...
Arcgis javascript那些事儿（十八）——空间查询的几种方法
一.引言之前写过一些空间查询的方法,隔了半年重新使用的时候又重新查了下,总结了一些新的方法,供初级.中级高级使用者进行不同程度上的定制查询== 二.空间查询1--graphiclayer或featu ...
javascript判断日期奇偶_JavaScript判断奇数和偶数的两种方法
JavaScript是前端开发中必不可少的一部分,那你知道如何用JS判断一个数是奇数还偶数吗?这篇文章就给大家分享JS判断奇数和偶数的两种方法,有一定的参考价值,感兴趣的朋友可以参考一下. 方法一:用 ...
html 自动滚动到底部,Javascript实现DIV滚动自动滚动到底部的代码
查询了一下相关的资料,Div没有自动滚动的属性,只能模拟鼠标的滚动来现实想要的效果. 关键的部分部分在这里:div.scrollTop = div.scrollHeight; 下面是具体实现的精简代码 ...
html div中显示pdf,使用Javascript从div中的HTML生成pdf
汪汪一只猫 jsPDF能够使用插件.为了使它能够打印HTML,您必须包含某些插件,因此必须执行以下操作:去https://github.com/MrRio/jsPDF下载最新版本.在项目中包括以下脚本 ...
JS 保留两位小数,不足用0补齐；js 实现对数字保留两位小数时不足两位自动补0；JavaScript保留两位小数,自动补零
let sgToFixed = (num,digit=2) => {//num是数值:digit是保留有效数字位数let nums=(num||0).toString().split('.'); ...
js中当等于最小值是让代码不执行_网页中JS函数自动执行常用三种方法
本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下一.JS方法 1.最简单的调用方式,直接写到html的body标签里面: 2.在JS语句调用: function myfun ...
html网页自动运行函数,在网页中JS函数自动执行常用三种方法
在网页中JS函数自动执行常用三种方法在HTML中的Head区域中,有如下函数: functionn MyAutoRun() { //以下是您的函数的代码,请自行修改先! alert("函数 ...

html div 自动滚动到底部,javascript让DIV的滚动自动滚动到最底部-4种方法

html div 自动滚动到底部,javascript让DIV的滚动自动滚动到最底部-4种方法相关推荐

最新文章

热门文章