`

关于iframe的滚动条

 
阅读更多

     最近研究了一下iframe的滚动条,iframe本身自带道理scorlling属性,但是如果嵌入到iframe中的jsp页面的body中设置了样式overvflow:hidden的时候,iframe的滚动条属性失效,经过多次试验,证明在子页面中设置overflow:auto的时候,iframe随着窗口放大缩小会出现滚动条,当我们用jquery在父页面获取iframe对象,把的滚动条属性设置成没有,或者把他的overflow设置成hidden时,此滚动条还在。

      最终解决问题的办法,通过iframe获取子页面的body,然后把body的overflow设置成hidden,这样滚动条动态消失了。

      也许有人会问为啥要这样动态去掉滚动条,最近做了一个jquery的动态渐出,如果存在滚动条,渐出的时候会很难看,所以在渐出之前把滚动条用js或者jquery去掉它,然后渐出就好看多了,研究了一段时间的结论,写下来日后有用可以参考。

分享到:
评论

相关推荐

    JS去除iframe滚动条的方法

    去除iframe滚动条的一种常见做法是通过JavaScript修改iframe的属性。在给定文件中,介绍了如何通过操作`scrolling`属性来实现这一目标。`scrolling`属性是一个用于控制是否显示滚动条的属性。在HTML标准中,它可以...

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

    下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧! iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下...

    外部滚动条控制iframe

    提供的代码片段展示了如何使用CSS和JavaScript结合,实现外部滚动条对iframe滚动的控制。下面是对代码片段的逐行解析: ```html #i1{width:500px;height:350px;float:left;}/* 设置iframe的宽度和高度 */ #d1{...

    完全搞定iframe(框架)里的滚动条.doc

    ### 完全搞定iframe(框架)里的滚动条 #### 知识点概览 ...通过对不同场景下iframe滚动条问题的理解以及采用合理的CSS或JavaScript技术,可以有效地解决在A页面中加载B页面时出现的滚动条问题,提升用户体验。

    iframe水平滚动条定位右侧

    iframe水平滚动条定位右侧及其样式的基本设置

    自动调节iframe高度,而不显示其滚动条 js

    ### 自动调节iframe高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一个页面的情况,这时通常会使用HTML中的`iframe`元素来实现。然而,当嵌入的内容高度不确定或者...

    layer弹出层 iframe层去掉滚动条的实例代码

    在这个问题中,我们关注的是如何在layer弹出层中的iframe层去除滚动条,以保持页面的整洁和用户体验。 首先,让我们深入理解一下涉及到的几个概念: 1. **layer**:Layer是基于jQuery的一个轻量级的弹窗插件,提供...

    Jquery iframe内部出滚动条

    总结一下,通过使用Jquery监听iframe的resize和load事件,并对iframe的高度进行动态调整,我们可以实现iframe内容的自适应显示,同时避免在浏览器窗口内出现不必要的滚动条,而只在iframe内部出现滚动条。...

    滚动条样式设置

    滚东条样式设置 不兼容火狐 可修改浏览器默认的滚动条 属用内核修改

    如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

    "让DIV固定在页面的某个位置而不随着滚动条随意滚动" 在前端开发中,我们常常需要让某个DIV元素固定在页面的某个位置,而不随着滚动条的滚动而移动。这可以通过使用CSS的position属性来实现,特别是使用fixed值。...

    javascript经典特效---Iframe页面的滚动.rar

    3. **控制Iframe滚动**: - 使用`scrolling`属性可以全局禁用或启用Iframe的滚动条,但无法精确控制滚动位置。 - 若要精确控制滚动,需通过JavaScript操作`iframe.contentWindow.scrollTo(x, y)`,其中x和y分别是...

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

    iframe内部html的滚动条不出现。并且活生生的从500px处截断,(类似overflow:hidden的效果)下面的内容不再显示。  问题重现: 结构:  index.html : <style>  #iframe{height:500px;} </style> ...

    ASP.NET iframe 的通用用法

    <iframe src="URL" width="宽度" height="高度" frameborder="边框" scrolling="滚动条"> </iframe> ``` 其中: - **src**: 指定要加载的文档 URL,可以是相对路径也可以是绝对路径。 - **width**: 设置内嵌文档的...

    iframe高度自适应及隐藏滚动条的实例详解

    然而,`iframe` 的使用往往伴随着一些问题,比如高度无法自适应和滚动条显示的问题。以下是对这两个问题的详细解释和解决方法。 **高度自适应** 在网页布局中,`iframe` 的高度如果不能自动适应其内容的高度,可能...

    jquery.nicescroll仿IOS滚动条美化插件

    此插件不仅适用于常规的页面滚动,还能够应用于框架(如 iframe)、弹出框、对话框内的滚动条美化,使得整个网页的滚动体验保持一致。 **5. 使用步骤** - **引入库文件**:首先,你需要在页面中引入 jQuery 和 ...

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

    为了提供更好的用户体验,我们期望在页面加载或刷新时,iframe中的滚动条能够默认处于底部,以便用户能立即看到最新的聊天记录。本文将探讨如何实现这一功能。 首先,我们需要理解iframe的基本概念。Iframe(Inline...

Global site tag (gtag.js) - Google Analytics