编程 Javascript

iframe 上下滚动条如何默认在下方实现原理

Posted in Javascript onDecember 10, 2012

问题：iframe 上下滚动条如何默认在下方，做的是聊天工具，数据多了，每次刷新出现的上下滚动默认在上方，还需下拉到下面才能看到聊天记录，有办法让它出现在下方吗?
答案：直接在iframe里写window.scrollTo(0,9999999)或者设置div等容器的scrollTop

document.getElementById(“x”).scrollTop = document.getElementById(“x”).scrollHeight 
window.scrollTo(0,9999999)

这个是解决了在下方，但是有新信息后，滚动条不会自动到下方，我是希望像qq聊天窗口一样，有新内容了，自动到最下方，应该如何来解决呢？

那就应该判断当前生成的内容是什么位置，即它的top或者margin-top是多少，再设置滚动条的高度，这个就可以了，每次生成就调用一下滚动条的高度变化，每次得到的新数据后，再调用 window.scrollTo(0,9999999)这个方法，就可以解决这个问题了！

iframe 上下滚动条如何默认在下方实现原理

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript call方法使用说明

Jan 11 Javascript

JavaScript代码简单实现求杨辉三角给定行的最大值

Oct 29 Javascript

跟我学习javascript的prototype原型和原型链

Nov 18 Javascript

Jquery1.9.1源码分析系列（六）延时对象应用之jQuery.ready

Nov 24 Javascript

js实现砖头在页面拖拉效果

Nov 20 Javascript

扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

Feb 21 Javascript

原生JS实现图片懒加载(lazyload)实例

Jun 13 Javascript

JS实现弹出下载对话框及常见文件类型的下载

Jul 13 Javascript

zTree 树插件实现全国五级地区点击后加载的示例

Feb 05 Javascript

JavaScript设计模式之缓存代理模式原理与简单用法示例

Aug 07 Javascript

JS实现查找数组中对象的属性值是否存在示例

May 24 Javascript

在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

Dec 16 Javascript

Ajax执行顺序流程及回调问题分析

Dec 10 #Javascript

js切换div css注意的细节

Dec 10 #Javascript

不同的jQuery API来处理不同的浏览器事件

Dec 09 #Javascript

addEventListener和attachEvent二者绑定的执行函数中的this不相同

Dec 09 #Javascript

Javascript获取窗口(容器)的大小及位置参数列举及简要说明

Dec 09 #Javascript

定义JavaScript二维数组采用定义数组的数组来实现

Dec 09 #Javascript

javascript操作JSON的要领总结

Dec 09 #Javascript

You might like

基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解

2013/05/07 PHP

详解PHP的Yii框架中日志的相关配置及使用

2015/12/08 PHP

PHP SPL 被遗落的宝石【SPL应用浅析】

2018/04/20 PHP

如果文字过长,则将过长的部分变成省略号显示

2006/06/26 Javascript

用正则表达式动态创建/增加css style script 兼容IE firefox

2009/03/10 Javascript

Extjs4 GridPanel的主要配置参数详细介绍

2013/04/18 Javascript

javascript验证身份证完全方法具体实现

2013/11/18 Javascript

js 跳出页面的frameset框架示例介绍

2013/12/23 Javascript

兼容主流浏览器的iframe自适应高度js脚本

2014/01/10 Javascript

使用JS或jQuery模拟鼠标点击a标签事件代码

2014/03/10 Javascript

javascript 动态创建表格

2015/01/08 Javascript

JavaScript中的依赖注入详解

2015/03/18 Javascript

JavaScript弹出新窗口并控制窗口移动到指定位置的方法

2015/04/06 Javascript

jquery实现焦点轮播效果

2017/02/23 Javascript

jquery dataTable 后台加载数据并分页实例代码

2017/06/07 jQuery

javascript实现考勤日历功能

2018/11/29 Javascript

vue+node 实现视频在线播放的实例代码

2020/10/19 Javascript

解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况

2020/10/30 Javascript

[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT

2014/05/23 DOTA

Python实现把xml或xsl转换为html格式

2015/04/08 Python

python中实现将多个print输出合成一个数组

2018/04/19 Python

python复制列表时[：]和[::]之间有什么区别

2018/10/16 Python

在PyCharm中三步完成PyPy解释器的配置的方法

2018/10/29 Python

python实现flappy bird小游戏

2018/12/24 Python

plt.figure()参数使用详解及运行演示

2021/01/08 Python

使用Python获取爱奇艺电视剧弹幕数据的示例代码

2021/01/12 Python

实习自荐信

2013/10/13 职场文书

学期自我鉴定

2013/11/04 职场文书

工商管理毕业生推荐信

2013/12/24 职场文书

会计核算科岗位职责

2014/03/19 职场文书

学校节能减排方案

2014/06/13 职场文书

高考作弊检讨书1500字

2015/02/16 职场文书

决心书格式及范文

2019/06/24 职场文书

该怎么书写道歉信？

2019/07/03 职场文书

2019西餐厅创业计划书范文！

2019/07/12 职场文书

使用pycharm运行flask应用程序的详细教程

2021/06/07 Python