编程 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 05 Javascript

基于jQuery的消息提示插件 DivAlert之旅（二）

Apr 01 Javascript

Jquery插件分享之气泡形提示控件grumble.js

May 20 Javascript

JavaScript使用shift方法移除素组第一个元素实例分析

Apr 06 Javascript

JS Array.slice 截取数组的实现方法

Jan 02 Javascript

微信小程序中实现一对多发消息详解及实例代码

Feb 14 Javascript

详解基于Bootstrap+angular的一个豆瓣电影app

Jun 26 Javascript

jQuery使用ajax_动力节点Java学院整理

Jul 05 jQuery

基于rem的移动端响应式适配方案(详解)

Jul 07 Javascript

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

Jul 13 Javascript

jsTree事件和交互以及插件plugins详解

Aug 29 Javascript

vue项目中js-cookie的使用存储token操作

Nov 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

php在线代理转向代码

2012/05/05 PHP

Zend的MVC机制使用分析(一)

2013/05/02 PHP

百度地图API使用方法详解

2015/08/25 PHP

Zend Framework入门教程之Zend_View组件用法示例

2016/12/09 PHP

jQuery EasyUI API 中文文档 DateTimeBox日期时间框

2011/10/16 Javascript

常见JS效果之图片减速度滚动实现代码

2011/12/08 Javascript

javascript 文本框水印/占位符(watermark/placeholder)实现方法

2012/01/15 Javascript

Javascript MVC框架Backbone.js详解

2014/09/18 Javascript

Javascript数组操作函数总结

2015/02/05 Javascript

JavaScript数据库TaffyDB用法实例分析

2015/07/27 Javascript

JavaScript实现弹出DIV层同时页面背景渐变成半透明效果

2016/03/25 Javascript

JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果

2016/08/23 Javascript

jQuery过滤选择器用法示例

2016/09/12 Javascript

JS中数组重排序方法

2016/11/11 Javascript

基于js原生和ajax的get和post方法以及jsonp的原生写法实例

2017/10/16 Javascript

Angular4的输入属性与输出属性实例详解

2017/11/29 Javascript

node.js博客项目开发手记

2018/03/16 Javascript

微信小程序动态生成二维码的实现代码

2018/07/25 Javascript

vue项目中使用lib-flexible解决移动端适配的问题解决

2018/08/23 Javascript

JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】

2019/07/10 jQuery

浅谈javascript如何获取文件后缀名

2020/08/07 Javascript

[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛胜者组赛BO3 第一场 8.20.mp4

2019/08/22 DOTA

python实现浪漫的烟花秀

2019/01/30 Python

python mysql断开重连的实现方法

2019/07/26 Python

python装饰器相当于函数的调用方式

2019/12/27 Python

用python批量移动文件

2021/01/14 Python

日本土著品牌，综合型购物网站：Cecile

2016/08/23 全球购物

美国体育用品商店：Academy Sports + Outdoors

2020/01/04 全球购物

一家外企的面试题目(C/C++面试题,C语言面试题)

2014/03/24 面试题

怎样有效的进行自我评价

2013/10/06 职场文书

打架检讨书100字

2014/01/08 职场文书

学生会个人自荐书范文

2014/02/12 职场文书

2014年教师节寄语

2014/04/03 职场文书

党校学习党性分析材料

2014/12/19 职场文书

Python的flask接收前台的ajax的post数据和get数据的方法

2021/04/12 Python

一篇文章带你掌握SQLite3基本用法

2022/06/14 数据库