编程 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 异步调用框架 (Part 5 - 链式实现)

Aug 04 Javascript

jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)

Mar 14 Javascript

js无法获取到html标签的属性的解决方法

Jul 26 Javascript

javascript 实现动态侧边栏实例详解

Nov 11 Javascript

bootstrap3使用bootstrap datetimepicker日期插件

May 24 Javascript

JavaScript时间戳与时间日期间相互转换

Dec 11 Javascript

Vue 去除路径中的＃号

Apr 19 Javascript

vue中使用element-ui进行表单验证的实例代码

Jun 22 Javascript

详解Vue SPA项目优化小记

Jul 03 Javascript

vue-better-scroll 的使用实例代码详解

Dec 03 Javascript

使用 vue 实例更好的监听事件及vue实例的方法

Apr 22 Javascript

vuecli项目构建SSR服务端渲染的实现

Oct 30 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 MYSQL中插入当前时间

2008/04/06 PHP

PHP处理Oracle的CLOB实例

2014/11/03 PHP

php+mysql+jquery实现日历签到功能

2017/02/27 PHP

js 字符串操作函数

2009/07/25 Javascript

复制Input内容的js代码_支持所有浏览器，修正了Firefox3.5以上的问题

2010/06/21 Javascript

javascript中删除指定数组中指定的元素的代码

2011/02/12 Javascript

js的Prototype属性解释及常用方法

2014/05/08 Javascript

两种方法实现在HTML页面加载完毕后运行某个js

2014/06/16 Javascript

使用javaScript动态加载Js文件和Css文件

2015/10/24 Javascript

复杂的javascript窗口分帧解析

2016/02/19 Javascript

jQuery增加与删除table列的方法

2016/03/01 Javascript

jQuery+CSS实现一个侧滑导航菜单代码

2016/05/09 Javascript

JavaScript实现复制文章自动添加版权

2016/08/02 Javascript

动态JavaScript所造成一些你不知道的危害

2016/09/25 Javascript

JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法

2017/01/20 Javascript

jquery实现侧边栏左右伸缩效果的示例

2017/12/19 jQuery

详解Javascript 中的 class、构造函数、工厂函数

2017/12/20 Javascript

axios取消请求的实践记录分享

2018/09/26 Javascript

layui复选框的全选与取消实现方法

2019/09/02 Javascript

vue+elementUI 实现内容区域高度自适应的示例

2020/09/26 Javascript

Python实现抓取百度搜索结果页的网站标题信息

2015/01/22 Python

python通过floor函数舍弃小数位的方法

2015/03/17 Python

Python设计模式之命令模式简单示例

2018/01/10 Python

Python中is和==的区别详解

2018/11/15 Python

python实现感知器算法（批处理）

2019/01/18 Python

Python 3 使用Pillow生成漂亮的分形树图片

2019/12/24 Python

python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例

2020/03/05 Python

python函数调用,循环,列表复制实例

2020/05/03 Python

地球鞋加拿大官网：Earth Shoes Canada

2020/11/17 全球购物

Smilodox官方运动服装店：从运动服到健身配件

2020/08/27 全球购物

Servlet的生命周期

2013/08/25 面试题

英语硕士生求职简历的自我评价

2013/10/15 职场文书

大堂副理的岗位职责范文

2014/02/17 职场文书

2015自愿离婚协议书范本

2015/01/28 职场文书

小学一年级数学教学反思

2016/02/16 职场文书

学长教您写论文：经验总结

2019/07/09 职场文书