编程 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获取xml节点的最大值(实现代码)

Dec 11 Javascript

jquery实现带二级菜单的导航示例

Apr 28 Javascript

《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史

Jan 09 Javascript

JQuery中上下文选择器实现方法

May 18 Javascript

jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

Jul 19 Javascript

js css3实现图片拖拽效果

Mar 04 Javascript

JavaScript实现前端分页控件

Apr 19 Javascript

JavaScript判断输入是否为数字类型的方法总结

Sep 28 Javascript

微信小程序开发技巧汇总

Jul 15 Javascript

详解Vue中的基本语法和常用指令

Jul 23 Javascript

解决vue props传Array/Object类型值,子组件报错的情况

Nov 07 Javascript

vue.js Router中嵌套路由的实用示例

Jun 27 Vue.js

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

怎样辨别一杯好咖啡

2021/03/03 新手入门

php学习笔记之函数声明(二)

2011/06/09 PHP

DEDE实现转跳属性文档在模板上调用出转跳地址

2016/11/04 PHP

用函数式编程技术编写优美的 JavaScript

2006/11/25 Javascript

50个比较实用jQuery代码段

2011/09/18 Javascript

鼠标左键单击冲突的问题解决方法(防止冒泡)

2014/05/14 Javascript

jQuery解析XML与传统JavaScript方法的差别实例分析

2015/03/05 Javascript

在JavaScript应用中实现延迟加载的方法

2015/06/25 Javascript

全面解析JavaScript中“&&”和“||”操作符(总结篇)

2016/07/18 Javascript

JavaScript获取ul中li个数的方法

2017/02/13 Javascript

使用vue.js写一个tab选项卡效果

2017/03/25 Javascript

HTML中使背景图片自适应浏览器大小实例详解

2017/04/06 Javascript

Vue中的Vux配置指南

2017/12/08 Javascript

一篇文章，教你学会Vue CLI 插件开发

2019/04/17 Javascript

微信小程序实现订单倒计时

2020/11/01 Javascript

javascrpt密码强度校验函数详解

2020/03/18 Javascript

vue 在methods中调用mounted的实现操作

2020/08/07 Javascript

vue组件开发之tab切换组件使用详解

2020/08/21 Javascript

原生JavaScript实现拖动校验功能

2020/09/29 Javascript

vue中实现点击空白区域关闭弹窗的两种方法

2020/12/30 Vue.js

Python多进程分块读取超大文件的方法

2016/04/13 Python

python getopt详解及简单实例

2016/12/30 Python

python用列表生成式写嵌套循环的方法

2018/11/08 Python

浅析python3字符串格式化format()函数的简单用法

2018/12/07 Python

Python检查ping终端的方法

2019/01/26 Python

Django项目使用CircleCI的方法示例

2019/07/14 Python

python正则爬取某段子网站前20页段子(request库)过程解析

2019/08/10 Python

Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例

2020/03/18 Python

python3通过udp实现组播数据的发送和接收操作

2020/05/05 Python

windows支持哪个版本的python

2020/07/03 Python

环保建议书400字

2014/05/14 职场文书

普通党员对照检查材料

2014/08/28 职场文书

小学教师个人总结

2015/02/05 职场文书

求职自我评价参考范文

2019/05/16 职场文书

python解决12306登录验证码的实现

2021/04/18 Python

jQuery实现广告显示和隐藏动画

2021/07/04 jQuery