编程 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刷新框架子页面的七种方法代码

Nov 20 Javascript

得到form下的所有的input的js代码

Nov 07 Javascript

JS判断不能为空实例代码

Nov 26 Javascript

使用C++为node.js写扩展模块

Apr 22 Javascript

完美实现仿QQ空间评论回复特效

May 06 Javascript

jQuery插件expander实现图片翻转特效

May 21 Javascript

jQuery实现的仿百度分页足迹效果代码

Oct 30 Javascript

jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

Apr 19 Javascript

jQuery实现底部浮动窗口效果

Sep 07 Javascript

Bootstrap基本组件学习笔记之缩略图(13)

Dec 08 Javascript

移动端效果之Swiper详解

Oct 09 Javascript

vue弹出框组件封装实例代码

Oct 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数组应用之比较两个时间的相减排序

2008/08/18 PHP

一些被忽视的PHP函数（简单整理）

2010/04/30 PHP

php设计模式 Delegation(委托模式)

2011/06/26 PHP

Codeigniter通过SimpleXML将xml转换成对象的方法

2015/03/19 PHP

使用图灵api创建微信聊天机器人

2015/07/23 PHP

js的写法基础分析

2011/01/17 Javascript

javascript ie6兼容position:fixed实现思路

2013/04/01 Javascript

jQuery lazyLoad图片延迟加载插件的优化改造方法分享

2013/08/13 Javascript

JS+CSS实现滑动切换tab菜单效果

2015/08/25 Javascript

JQuery移动页面开发之屏幕方向改变与滚屏的实现

2015/12/03 Javascript

js+css简单实现网页换肤效果

2015/12/29 Javascript

Javascript中的arguments对象

2016/06/20 Javascript

Bootstrap select实现下拉框多选效果

2016/12/23 Javascript

JS实现图片放大缩小的方法

2017/02/15 Javascript

浅谈angularjs依赖服务注入写法的注意点

2017/04/24 Javascript

vue2.0 中#$emit,$on的使用详解

2017/06/07 Javascript

Vue.js中extend选项和delimiters选项的比较

2017/07/17 Javascript

jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】

2018/04/26 jQuery

javascript实现移动端红包雨页面

2020/06/23 Javascript

用Python中的__slots__缓存资源以节省内存开销的方法

2015/04/02 Python

python合并同类型excel表格的方法

2018/04/01 Python

python使用tornado实现登录和登出

2018/07/28 Python

浅析Python 中几种字符串格式化方法及其比较

2019/07/02 Python

Django中ORM的基本使用教程

2020/12/22 Python

css3类选择器之结合元素选择器和多类选择器用法

2017/03/09 HTML / CSS

世界上最大的汽车共享网站：Zipcar

2017/01/14 全球购物

韩国家庭购物网上商店：Nsmall

2017/05/07 全球购物

如何启动时不需输入用户名与密码

2014/05/09 面试题

机械工程师求职自我评价

2013/09/23 职场文书

《梅兰芳学艺》教学反思

2014/02/24 职场文书

满月酒主持词

2014/03/27 职场文书

中华魂演讲稿

2014/05/13 职场文书

办公室务虚会发言材料

2014/10/20 职场文书

社区元宵节活动总结

2015/02/06 职场文书

离婚承诺书格式范文

2015/05/04 职场文书

求职自荐信该如何书写？

2019/06/24 职场文书