编程 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 版本]

Mar 20 Javascript

javascript 事件绑定问题

Jan 01 Javascript

IE8下jQuery改变png图片透明度时出现的黑边

Aug 30 Javascript

轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

Nov 30 Javascript

jQuery操作cookie

Aug 08 Javascript

JS实现的手机端精简幻灯片效果

Sep 05 Javascript

vue-router：嵌套路由的使用方法

Feb 21 Javascript

vue2+el-menu实现路由跳转及当前项的设置方法实例

Nov 07 Javascript

Vue手把手教你撸一个 beforeEnter 钩子函数

Apr 24 Javascript

如何在vue里添加好看的lottie动画

Aug 02 Javascript

Angular(5.2->6.1)升级小结

Dec 27 Javascript

基于VUE实现判断设备是PC还是移动端

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

fleaphp rolesNameField bug解决方法

2011/04/23 PHP

PHP中判断变量为空的几种方法分享

2013/08/26 PHP

jQuery ajax 路由和过滤器使用说明

2011/08/02 Javascript

JavaScript作用域与作用域链深入解析

2013/12/06 Javascript

jquery实现清新实用的网页菜单效果

2015/08/28 Javascript

jQuery实现定位滚动条位置

2016/08/05 Javascript

Javascript 闭包详解及实例代码

2016/11/30 Javascript

使用jQuery和ajax代替iframe的方法(详解)

2017/04/12 jQuery

从零开始学习Node.js系列教程之设置HTTP头的方法示例

2017/04/13 Javascript

iframe与主框架跨域相互访问实现方法

2017/09/14 Javascript

jQuery zTree 异步加载添加子节点重复问题

2017/11/29 jQuery

JS实现点击下拉菜单把选择的内容同步到input输入框内的实例

2018/01/23 Javascript

vue router动态路由下让每个子路由都是独立组件的解决方案

2018/04/24 Javascript

webpack4之SplitChunksPlugin使用指南

2018/06/12 Javascript

对vue2.0中.vue文件页面跳转之.$router.push的用法详解

2018/08/24 Javascript

使用webpack打包后的vue项目如何正确运行（express）

2018/10/26 Javascript

[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06

2020/11/09 DOTA

详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数

2018/04/18 Python

对python中for、if、while的区别与比较方法

2018/06/25 Python

Python3.7 dataclass使用指南小结

2019/02/22 Python

pandas DataFrame 交集并集补集的实现

2019/06/24 Python

详解Python图像处理库Pillow常用使用方法

2019/09/02 Python

python异常处理和日志处理方式

2019/12/24 Python

解决pycharm中导入自己写的.py函数出错问题

2020/02/12 Python

Python实现RabbitMQ6种消息模型的示例代码

2020/03/30 Python

Python异常处理机制结构实例解析

2020/07/23 Python

HTML5使用drawImage()方法绘制图像

2014/06/23 HTML / CSS

匡威比利时官网：Converse Belgium

2017/04/13 全球购物

副职竞争上岗演讲稿

2014/05/12 职场文书

生日宴会策划方案

2014/06/03 职场文书

2014年医院后勤工作总结

2014/12/06 职场文书

兵马俑的导游词

2015/02/02 职场文书

病假证明模板

2015/06/19 职场文书

严以律己专题学习研讨会发言材料

2015/11/09 职场文书

人事部：年度述职报告范文

2019/07/12 职场文书

MySQL 分页查询的优化技巧

2021/05/12 MySQL