编程 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 相关文章推荐

jquery复选框CHECKBOX全选、反选

Aug 30 Javascript

jquery与google map api结合使用控件,监听器

Mar 04 Javascript

jquery实现图片翻页效果

Dec 23 Javascript

jQuery实现的fixedMenu下拉菜单效果代码

Aug 24 Javascript

JS实现仿Windows7风格的网页右键菜单效果代码

Sep 11 Javascript

Javascript技术难点之apply，call与this之间的衔接

Dec 04 Javascript

Express的HTTP重定向到HTTPS的方法

Jun 06 Javascript

jQuery序列化form表单数据为JSON对象的实现方法

Sep 20 jQuery

qrcode生成二维码微信长按无法识别问题的解决

Apr 04 Javascript

Vue源码之关于vm.$delete()/Vue.use()内部原理详解

May 01 Javascript

适合前端Vue开发童鞋的跨平台Weex的使用详解

Oct 16 Javascript

vue中渲染对象中属性时显示未定义的解决

Jul 31 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

简单的PHP多图上传小程序代码

2011/07/17 PHP

php文件夹与文件目录操作函数介绍

2013/09/09 PHP

php输出图像的方法实例分析

2017/02/16 PHP

PHP学习笔记之session

2018/05/06 PHP

Extjs4 GridPanel 的几种样式使用介绍

2013/04/18 Javascript

jQuery.extend()的实现方式详解及实例

2013/06/29 Javascript

Extjs表单常见验证小结

2014/03/07 Javascript

Jquery节点遍历next与nextAll方法使用示例

2014/07/22 Javascript

浅谈javascript的调试

2015/01/28 Javascript

JS制作手机端自适应缩放显示

2015/06/11 Javascript

AngularJS 自定义指令详解及示例代码

2016/08/17 Javascript

jQuery ready()和onload的加载耗时分析

2016/09/08 Javascript

nodejs和C语言插入mysql数据库乱码问题的解决方法

2017/04/14 NodeJs

nodejs批量下载图片的实现方法

2017/05/19 NodeJs

基于JavaScript实现多级菜单效果

2017/07/25 Javascript

在Swiper内如何制作CSS3动画效果示例代码

2017/12/07 Javascript

Node.js console控制台简单用法分析

2019/01/04 Javascript

小程序实现搜索框

2020/06/19 Javascript

Python 处理数据的实例详解

2017/08/10 Python

python数字图像处理之骨架提取与分水岭算法

2018/04/27 Python

python环形单链表的约瑟夫问题详解

2018/09/27 Python

Python查找数组中数值和下标相等的元素示例【二分查找】

2019/02/13 Python

华为2019校招笔试题之处理字符串(python版)

2019/06/25 Python

Django自定义模板过滤器和标签的实现方法

2019/08/21 Python

最新英语专业学生求职信范文

2013/09/21 职场文书

计算机工程学院个人求职信

2013/10/05 职场文书

财务助理岗位职责

2013/11/10 职场文书

房地产员工找工作的自我评价

2013/11/15 职场文书

会计员岗位职责

2014/03/15 职场文书

计算机专业应届生求职信

2014/04/06 职场文书

2014年秋季开学典礼致辞

2014/08/02 职场文书

社区文艺活动方案

2014/08/19 职场文书

党的群众路线教育实践活动个人对照检查剖析材料

2014/09/23 职场文书

国际贸易本科毕业生求职信

2014/09/26 职场文书

入党介绍人意见怎么写

2015/06/03 职场文书

实战快速定位MySQL的慢SQL

2022/03/22 MySQL