iframe 上下滚动条如何默认在下方实现原理

问题：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)这个方法，就可以解决这个问题了！

赞 (0)

相关推荐

  • JavaScript中关于iframe滚动条的去除和保留

    在开发中经常遇到去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条,大家基于js是怎么实现的呢?下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法.一起看看吧! iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条.那么我们应该怎么做呢?    一:去掉全部的滚动条 第一个方法:   iframe 有一个scrolling属性,它

  • IOS上iframe的滚动条失效的解决办法

    问题描述: iframe设置了高度(例如500px).倘若iframe的内容足够长超出了iframe设定的高度时,在ipad等设备上.iframe内部html的滚动条不出现.并且活生生的从500px处截断,(类似overflow:hidden的效果)下面的内容不再显示. 问题重现: 结构: index.html : <style> #iframe{height:500px;} </style> <div id="content"> <ifram

  • JS去除iframe滚动条的方法

    本文实例讲述了JS去除iframe滚动条的方法.分享给大家供大家参考.具体如下: 下面的代码可以通过修改scrolling来去除iframe的滚动条 <!DOCTYPE html> <html> <head> <script> function removeScroll() { document.getElementById("myframe").scrolling="no"; } </script> &l

  • Jquery iframe内部出滚动条

    复制代码 代码如下: //调用函数 var pagestyle = function() { var rframe = $("#mainFrame"); //ie7默认情况下会有上下滚动条,去掉上下15像素 var h = $(window).height() - rframe.offset().top - 15; rframe.height(h); } //注册加载事件 $("#mainFrame").load(pagestyle); //注册窗体改变大小事件 $

  • 在iframe中隐藏横向滚动条的方法大全

    在iframe中隐藏横向滚动条.. 删除DM中自动生成的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 此句代码. body中这样写: <body style=style="overflow-x:hidden;overflow-y:scroll"> 能隐藏IFRAM

  • iframe 上下滚动条如何默认在下方实现原理

    问题:iframe 上下滚动条如何默认在下方,做的是聊天工具,数据多了,每次刷新出现的上下滚动默认在上方,还需下拉到下面才能看到聊天记录,有办法让它出现在下方吗? 答案:直接在iframe里写window.scrollTo(0,9999999)或者设置div等容器的scrollTop 复制代码 代码如下: document.getElementById("x").scrollTop = document.getElementById("x").scrollHeigh

  • Java8默认方法Default Methods原理及实例详解

    这篇文章主要介绍了Java8默认方法Default Methods原理及实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Java 8 引入了新的语言特性--默认方法(Default Methods). Default methods enable new functionality to be added to the interfaces of libraries and ensure binary compatibility wit

  • ASP.NET Core MVC 修改视图的默认路径及其实现原理解析

    ASP.NET Core MVC 修改视图的默认路径及其实现原理解析

    本章将和大家分享如何在ASP.NET Core MVC中修改视图的默认路径,以及它的实现原理. 导语:在日常工作过程中你可能会遇到这样的一种需求,就是在访问同一个页面时PC端和移动端显示的内容和风格是不一样(类似两个不一样的主题),但是它们的后端代码又是差不多的,此时我们就希望能够使用同一套后端代码,然后由系统自动去判断到底是PC端访问还是移动端访问,如果是移动端访问就优先匹配移动端的视图,在没有匹配到的情况下才去匹配PC端的视图. 下面我们就来看下这个功能要如何实现,Demo的目录结构如下所示

  • 利用iframe实现ajax跨域通信的实现原理(图解)

    利用iframe实现ajax跨域通信的实现原理(图解)

    在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

  • MySQL MyISAM默认存储引擎实现原理

    默认MyISAM的表会在磁盘中产生3个文件:.frm(表结构文件)..MYD(数据文件)..MYI(索引文件) 可以在创建的时候指定数据文件和索引文件的存储位置,只有MyISAM表支持: DATA DIRECTORY [=] 数据保存的绝对路径 INDEX DIRECTORY [=] 索引文件的绝对路径 MyISAM单表最大支持的数据量为2的64次方跳记录 每个表最多可以建立64个索引 如果是复合索引,每个复合索引最多包含16个列,索引值最大长度是1000B MyISAM引擎的存储格式: 定长(

  • 实现div滚动条默认最底部以及默认最右边的示例代码

    有个需求,要在显示聊天框时,固定框的大小为300px高度,宽度50px左右,然后当聊天内容超出宽度或者高度时会出现滚动条,并且垂直滚动条要默认最底部,以便显示最新消息,水平滚动条一般都是默认最左,这里列出默认最底部以及默认最右边的方法的代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>实现div滚动条默认最底部以及默认最右边</title&

  • js操作滚动条事件实例

    本文实例讲述了js操作滚动条事件的方法.分享给大家供大家参考.具体分析如下: 之前一直很纳闷,如何监视滚动条的事件,今天终于有点明白了. 下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 window.onscroll = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t > 0) { $(".cbbfixed").css(&q

随机推荐