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

js 绑定带参数的事件以及手动触发事件

Apr 27 Javascript

JS关闭窗口或JS关闭页面的几种代码分享

Oct 25 Javascript

基于jQuery的图片不完全按比例自动缩小

Jul 11 Javascript

Javascript中设置默认参数值示例

Sep 11 Javascript

JavaScript基础函数整理汇总

Jan 30 Javascript

浅谈js构造函数的方法与原型prototype

Jul 04 Javascript

基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

Jul 18 Javascript

Node.js测试中的Mock文件系统详解

Nov 21 Javascript

Vue引用Swiper4插件无法重写分页器样式的解决方法

Sep 27 Javascript

JS快速实现简单计算器

Apr 08 Javascript

javascript实现简易计算器功能

Sep 23 Javascript

js实现复制粘贴的两种方法

Dec 04 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快速统计某个数据库中每张表的数据量

2012/09/04 PHP

Codeigniter中集成smarty和adodb的方法

2016/03/04 PHP

PHP实现微信提现（企业付款到零钱）

2019/08/01 PHP

laravel框架中视图的基本使用方法分析

2019/11/23 PHP

TP5框架安全机制实例分析

2020/04/05 PHP

PHP7变量处理机制修改

2021/03/09 PHP

判断JavaScript对象是否可用的最正确方法分析

2008/10/03 Javascript

JavaScript定义类的几种方式总结

2014/01/06 Javascript

qq悬浮代码(兼容各个浏览器)

2014/01/29 Javascript

js调用iframe实现打印页面内容的方法

2014/03/04 Javascript

js判断ie版本号的简单实现代码

2014/03/05 Javascript

基于jQuery插件实现环形图标菜单旋转切换特效

2015/05/15 Javascript

使用AngularJS处理单选框和复选框的简单方法

2015/06/19 Javascript

js判断文本框输入的内容是否为数字

2015/12/23 Javascript

JavaScript的设计模式经典之代理模式

2016/02/24 Javascript

深入解析AngularJS框架中$scope的作用与生命周期

2016/03/05 Javascript

canvas绘制表盘时钟

2017/01/23 Javascript

tween.js缓动补间动画算法示例

2018/02/13 Javascript

vue双向数据绑定知识点总结

2018/04/18 Javascript

JavaScript封装的常用工具类库bee.js用法详解【经典类库】

2018/09/03 Javascript

Bootstrap的aria-label和aria-labelledby属性实例详解

2018/11/02 Javascript

聊聊鉴权那些事(推荐)

2019/08/22 Javascript

Element 默认勾选表格 toggleRowSelection的实现

2019/09/04 Javascript

如何正确理解vue中的key详解

2019/11/02 Javascript

react组件基本用法示例小结

2020/04/27 Javascript

基于Echarts图表在div动态切换时不显示的解决方式

2020/07/20 Javascript

原生JS实现拖拽效果

2020/12/04 Javascript

详解Python中使用base64模块来处理base64编码的方法

2016/07/01 Python

深入解答关于Python的11道基本面试题

2017/04/01 Python

pygame实现烟雨蒙蒙下彩虹雨

2019/11/11 Python

python实现替换word中的关键文字(使用通配符)

2020/02/13 Python

python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例

2020/02/28 Python

用CSS3实现Win8风格的方格导航菜单效果

2013/04/10 HTML / CSS

波兰在线运动商店：YesSport

2020/07/23 全球购物

用JAVA SOCKET编程，读服务器几个字符，再写入本地显示

2012/11/25 面试题

应届生妇产科护士求职信

2013/10/27 职场文书