编程 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解密入门最终变量劫持

Jun 25 Javascript

jQuery scroll事件实现监控滚动条分页示例

Apr 04 Javascript

JS实现可展开折叠层的鼠标拖曳效果

Oct 09 Javascript

javascript实现的猜数小游戏完整实例代码

May 10 Javascript

关于function类中定义变量this的简单说明

May 28 Javascript

基于HTML+CSS+JS实现增加删除修改tab导航特效代码

Aug 05 Javascript

jQuery实现jQuery-form.js实现异步上传文件

Apr 28 jQuery

vue.js数据绑定的方法（单向、双向和一次性绑定）

Jul 13 Javascript

基于bootstrap实现多个下拉框同时搜索功能

Jul 19 Javascript

Rollup处理并打包JS文件项目实例代码

May 31 Javascript

JavaScript中import用法总结

Jan 20 Javascript

vue在响应头response中获取自定义headers操作

Jul 24 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正则表达式中的非贪婪模式匹配的使用

2014/11/25 PHP

php遍历树的常用方法汇总

2015/06/18 PHP

了解jQuery技巧来提高你的代码

2010/01/08 Javascript

jquery中dom操作和事件的实例学习仿yahoo邮箱登录框的提示效果

2011/11/30 Javascript

jquery中dom操作和事件的实例学习下拉框应用

2011/12/01 Javascript

最佳6款用于移动网站开发的jQuery 图片滑块插件小结

2012/07/20 Javascript

javascript中DOM复选框选择用法实例

2015/05/14 Javascript

js计算时间差代码【包括计算，天，时，分，秒】

2016/04/26 Javascript

JavaScript数组的定义及数字操作技巧

2016/06/06 Javascript

jQuery实现公告新闻自动滚屏效果实例代码

2016/07/14 Javascript

详解vue-cli 构建Vue项目遇到的坑

2017/08/30 Javascript

微信小程序之蓝牙的链接

2017/09/26 Javascript

javascript自定义事件功能与用法实例分析

2017/11/08 Javascript

vue + element-ui实现简洁的导入导出功能

2017/12/22 Javascript

vue组件编写之todolist组件实例详解

2018/01/22 Javascript

D3.js实现简洁实用的动态仪表盘的示例

2018/04/04 Javascript

jQuery实现的两种简单弹窗效果示例

2018/04/18 jQuery

vue2.0 路由模式mode="history"的作用

2018/10/18 Javascript

详解JavaScript中的强制类型转换

2019/04/15 Javascript

微信公众号获取用户地理位置并列出附近的门店的示例代码

2019/07/25 Javascript

vue实现div可拖动位置也可改变盒子大小的原理

2020/09/16 Javascript

[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦

2016/06/27 DOTA

Python os模块中的isfile()和isdir()函数均返回false问题解决方法

2015/02/04 Python

python实现图片二值化及灰度处理方式

2019/12/07 Python

基于Tensorflow:CPU性能分析

2020/02/10 Python

PYcharm 激活方法(推荐)

2020/03/23 Python

纯CSS3实现自定义Tooltip边框涂鸦风格的教程

2014/11/05 HTML / CSS

几道PHP的面试题

2012/05/19 面试题

高级工程师岗位职责

2013/12/15 职场文书

毕业生个人求职信范文分享

2014/01/05 职场文书

放飞蜻蜓反思

2014/02/05 职场文书

家长对学生的评语

2014/04/18 职场文书

师德师风建设方案

2014/05/08 职场文书

2015年物流客服工作总结

2015/07/27 职场文书

go 实现简易端口扫描的示例

2021/05/22 Golang

MyBatis XPathParser解析器使用范例详解

2022/07/15 Java/Android