编程 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 事件对象的实现

Jul 13 Javascript

js null undefined 空区别说明

Jun 13 Javascript

Express作者TJ告别Node.js奔向Go

Jul 14 Javascript

JavaScript中伪协议 javascript:使用探讨

Jul 18 Javascript

jquery操作 iframe的方法

Dec 03 Javascript

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

May 12 Javascript

JS采用绝对定位实现回到顶部效果完整实例

Jun 20 Javascript

jQuery Validate 无法验证 chosen-select元素的解决方法

May 17 jQuery

浅谈Angular路由复用策略

Oct 04 Javascript

vue中导出Excel表格的实现代码

Oct 18 Javascript

深入理解Node内建模块和对象

Mar 12 Javascript

原生JS与JQ获取元素的区别详解

Feb 13 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

CodeIgniter输出中文乱码的两种解决办法

2014/06/12 PHP

浅谈PHP值mysql操作类

2016/06/29 PHP

PHP回调函数简单用法示例

2019/05/08 PHP

javascript获取元素CSS样式代码示例

2013/11/28 Javascript

简述JavaScript的正则表达式中test()方法的使用

2015/06/16 Javascript

Bootstrap自定义文件上传下载样式

2016/05/26 Javascript

Ajax基础知识详解

2017/02/17 Javascript

jQuery获取Table某列的值（推荐）

2017/03/03 Javascript

基于JavaScript实现活动倒计时效果

2017/04/20 Javascript

node.js之基础加密算法模块crypto详解

2018/09/11 Javascript

vue3.0 CLI - 2.5 - 了解组件的三维

2018/09/14 Javascript

详解js访问对象的属性和方法

2018/10/25 Javascript

详解vue 兼容IE报错解决方案

2018/12/29 Javascript

jQuery实现高级检索功能

2019/05/28 jQuery

Vue 动态添加路由及生成菜单的方法示例

2019/06/20 Javascript

JavaScript实现H5接金币功能(实例代码)

2021/02/22 Javascript

[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18

2018/08/19 DOTA

python实现通过代理服务器访问远程url的方法

2015/04/29 Python

Python常用算法学习基础教程

2017/04/13 Python

python 获取当天凌晨零点的时间戳方法

2018/05/22 Python

使用Python实现从各个子文件夹中复制指定文件的方法

2018/10/25 Python

详解重置Django migration的常见方式

2019/02/15 Python

解决Python3 抓取微信账单信息问题

2019/07/19 Python

Python实现代码块儿折叠

2020/04/15 Python

手把手教你将Flask应用封装成Docker服务的实现

2020/08/19 Python

详解python中的闭包

2020/09/07 Python

css3教程之倾斜页面

2014/01/27 HTML / CSS

纯css3实现图片翻牌特效

2015/03/10 HTML / CSS

购买200个世界上最好的内衣品牌：Bare Necessities

2017/02/11 全球购物

求职信怎么写范文

2014/05/26 职场文书

生产助理岗位职责

2014/06/18 职场文书

ktv好的活动方案

2014/08/15 职场文书

七一讲话心得体会

2014/09/05 职场文书

2014年高二班主任工作总结

2014/12/16 职场文书

2015年医务人员医德医风自我评价

2015/03/03 职场文书

2016大学生国家助学贷款承诺书

2016/03/25 职场文书