iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢?

一:去掉全部的滚动条

第一个方法:   iframe 有一个scrolling属性,它有 auto , yes , no 这三个值。

scrolling : auto -----在需要的时候滚动条出现

scrolling : yes ------始终显示滚动条

scrolling : no -------始终隐藏滚动条

当设置   scrolling : no 时,全部的滚动条就没有了。

第二个方法:我发现除了 scrolling 可以去掉全部的滚动条外,还有另一个方法,在嵌入的页面里设置 body{overflow:hidden},这样也可以将滚动条去掉,而且这也是当我们只想去掉某一个滚动条所使用的属性。

二:去掉右边的滚动条且保留底下的滚动条

如果只想保留底下的滚动条,那么可以在嵌入的页面里设置 body{overflow-x:auto ; overflow-y:hidden;}

三:去掉底下的滚动条且保留右边的滚动条

在嵌入的页面里设置 body{overflow-x:hidden;overflow-y:auto;}

我们已经知道了这两个属性都可以设置滚动条的显示和隐藏,那么当两个同时设置时,会出现哪个效果呢?

通过检测,我发现当 scrolling = " auto "  或者 " yes " 时,如果设置了 body,那么就会使用body里的设置;当 scrolling = " no " 时,不管body设置了什么,都会使用 scrolling 的设置,即全部的滚动条都被去掉了。

iframe关于滚动条的去除和保留的更多相关文章

  1. 关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条

    关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条 关于<iframe>可以通过设置属性scrolling="no" 去掉iframe的两个滚动条. 如何只去掉水 ...

  2. iframe显示滚动条

    子页面通过iframe加载,出现了竖向滚动条 最后查出原因:文档申明 iframe有滚动条的页面的文档申明 <!DOCTYPE html> 改成如下就行了 <!DOCTYPE HTM ...

  3. IE8以下版本iframe出现滚动条和内容空白问题

    在网页中使用iframe引用了第三方的页面 $("#tianqi").html('<iframesrc="http://i.tianqi.com/index.php ...

  4. 去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。

    对于iframe,相信大家都是知道存在很多弊端,比如说不利于搜索引擎的抓取:产生冗余结构体系不易管理等.不过在漫长的开发路上有时候使用是不可避免的. 前两天在做一个退弹的功能的时候使用了iframe, ...

  5. 遇到的有关iframe的滚动条问题

    今天才发现一个简单有趣的问题,有关iframe的: <div style="height: 800px;overflow: auto;"> <iframe src ...

  6. css溢出滚动条及去除滚动条的方法

    <div class="father"> <div class="childern"></div> </div> ...

  7. iframe子元素相对于父页面滚动条固定(iframe无滚动条,iframe固定高度有滚动条,两种情况)

    一.当iframe自适应高度,无滚动条时候: 例如这样: //随着父页面滚动条滚动定位“#qn-quc”他的位置固定在顶部 $(parent.window).scroll(function() { v ...

  8. IOS中iframe的滚动条不启作用

    引自:https://www.cnblogs.com/weinan/archive/2013/01/05/2832800.html 问题描述: iframe设置了高度(例如500px).倘若ifram ...

  9. Iframe去掉滚动条

    <html><head><title></title></head><body STYLE='OVERFLOW:SCROLL;OVER ...

随机推荐

  1. Java企业实训 - 01 - Java前奏

    前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...

  2. MySQL 优化之 ICP (index condition pushdown:索引条件下推)

    ICP技术是在MySQL5.6中引入的一种索引优化技术.它能减少在使用 二级索引 过滤where条件时的回表次数 和 减少MySQL server层和引擎层的交互次数.在索引组织表中,使用二级索引进行 ...

  3. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  4. ABP框架 - 应用服务

    文档目录 本节内容: IApplicationService 接口 ApplicationService 类 CrudAppService 和 AsyncCrudAppService 类 简单的CRU ...

  5. 提高(Android)开发效率的工具与网站

    Dev_Tools 写这篇不是为了"水",是因为有些工具确实不错,但是换个电脑要找到或者在某个时候你想用但是你只知道存在了书签里.然后就只能下载chrome然后登录账户同步书签了. ...

  6. Atitit 图像处理类库大总结attilax qc20

    Atitit 图像处理类库大总结attilax qc20 1.1. 选择与组合不同的图像处理类库1 1.2. Halcon 貌似商业工具,功能强大.1 1.3. Openvc  Openvc功能也是比 ...

  7. Android WebView 优化页面加载效果

    目前带有Web功能的APP越来越多,为了能够更好的使用WebView展示页面,可以考虑做相关的优化:WebView 缓存,资源文件本地存储,客户端UI优化. 可能有些人会说,为什么不做Native的, ...

  8. 我为NET狂官方面试题

    基础牢不牢测一测便了解,工作没工作测一测便清楚,工作有几年测一测便知道 最近帮人过一遍C#基础,出了点题目,有需要的同志拿走 答案不唯一,官方答案只供参考,若有错误欢迎提出~ 更新ing 1.面向过程 ...

  9. 关于gitignore文件的创建与使用

    在我们使用github提交本地代码时,有些库文件和日志文件是不必要提交的,那如何处理这个问题呢?这个时候我们就会用到.gitignore文件了. 该篇博客我会介绍如何创建.gitignore,以及如何 ...

  10. Mysql加锁过程详解

    1.背景 MySQL/InnoDB的加锁分析,一直是一个比较困难的话题.我在工作过程中,经常会有同事咨询这方面的问题.同时,微博上也经常会收到MySQL锁相关的私信,让我帮助解决一些死锁的问题.本文, ...