隐藏iframe滚动条,并禁止滑动
隐藏iframe滚动条
当我们通过 iframe 展示图片,或是通过 iframe 展示 PDF文件 时,如果图片和 PDF 超出 iframe设置的宽高,就会出现横纵向的滚动条,如下图。当 iframe 展示 PDF文件 时如何隐藏滚动条?当 iframe 展示图片时如何隐藏滚动条?有下面两种方法:
1、通过 scrolling : no 隐藏滚动条
iframe 的 scrolling 属性规定是否在 iframe 中显示滚动条。他有以下三个取值:
取值 | 定义 |
---|---|
auto | 默认,在需要的时候滚动条出现 |
yes | 始终显示滚动条 |
no | 始终隐藏滚动条 |
给 iframe 添加 scrolling=“no” 属性,可以看到 iframe 展示图片的滚动条被隐藏,iframe 展示 PDF文件 的滚动条还是存在。
所以, iframe 展示图片时可以通过设置 scrolling=“no” 属性来隐藏滚动条,iframe 展示 PDF文件时 设置 scrolling=“no” 属性并不能隐藏滚动条。
了解:给 PDF地址后面加 ‘#toolbar=0’ 可以隐藏顶部操作栏
<!-- iframe展示的是图片 -->
<iframe scrolling="no"src="https://img2.baidu.com/it/u=1730484486,1064790066&fm=253&fmt=auto&app=138&f=JPEG?w=747&h=500">
</iframe><!-- iframe展示的是PDF -->
<iframescrolling="no"src="https://www.huakesy.com.cn/fastfile/group1/M00/00/99/Cm7Q2mP_AxyACCSOADZktRoWysI982.pdf#toolbar=0">
</iframe>
2、外层元素设置 overflow: hidden 隐藏滚动条
在 iframe 外层包裹一个 div 标签,div 与 iframe 宽高相同,并设置 overflow: hidden,
根据实际情况,重新设置 iframe 的宽高,已知浏览器滚动条宽度为 17px,
如果 iframe 存在纵向滚动条,则 iframe宽度=原宽度+滚动条宽度,即width: calc(100% + 17px);
如果 iframe 存在横向滚动条,则 iframe高度=原高度+滚动条宽度,即height: calc(100% + 17px)。
<!-- iframe展示的是图片 -->
<div style="width: 300px; height: 400px; overflow: hidden;"><iframestyle="width: calc(100% + 17px); height: calc(100% + 17px); pointer-events: none;"src="https://img2.baidu.com/it/u=1730484486,1064790066&fm=253&fmt=auto&app=138&f=JPEG?w=747&h=500"></iframe>
</div><!-- iframe展示的是PDF -->
<div style="width: 300px; height: 400px; overflow: hidden;"><iframestyle="width: calc(100% + 17px); pointer-events: none;"src="https://www.huakesy.com.cn/fastfile/group1/M00/00/99/Cm7Q2mP_AxyACCSOADZktRoWysI982.pdf#toolbar=0"></iframe>
</div>
iframe禁止滑动
css 的 pointer-events 用来设置元素是否对鼠标事件做出反应,给 iframe 设置 pointer-events: none 禁止元素对鼠标事件作出反应,就可以禁止iframe滑动。
隐藏iframe滚动条,并禁止滑动相关推荐
- 隐藏iframe滚动条
iframe会出现滚动条是因为子页面内容过长,所以想让页面不出现滚动条有两种方法: 一.让子页面高度不超过屏幕高度,这样会修改原本写好的页面布局. 二.修改滚动条样式,使其滚动条视觉上隐藏 ::-we ...
- html iframe随页面滚动,如何隐藏iframe的滚动条,但依然可以页面滚动
今天遇到一个这样的问题:网页中如何隐藏iframe中的垂直滚动条,但依然可以用滚轮实现页面滚动???我就想先把iframe定义宽度和高度,在设置overflow:hidden;呗,但是这样多余的部分会 ...
- 移动端弹出层加遮罩后禁止滑动
//实现滚动条无法滚动 var mo=function(e){e.preventDefault();};/***禁止滑动***/ function stop(){document.body.style ...
- Android原生Switch禁止滑动实现
前言 搜遍全网,没有找到对原生控件实现禁止滑动的,全都是自定义view实现.然后自己找到了一个解决方式,可以不重写Switch控件,只用style就能实现. 这边先说一下有滑动效果会产生的问题: 在注 ...
- ScrollView和HorizontalScrollView常用属性,及禁止滑动
常用属性:详见注释 activity_main_28 <?xml version="1.0" encoding="utf-8"?> <Line ...
- html纵向滚动条隐藏,隐藏横向滚动条或纵向滚动条的解决方案
在WEB实际开发过程中,特别是在iframe引用其它网页时,可能大家遇到过这样的问题,当您的页面在框架中的时候,即使您的所有的控件的宽度都没有超过屏幕宽度(一般设置为100%),但横向滚动条依然出现. ...
- javaScript实现顶部通栏:往下滑动到距离顶部一定距离,顶部通栏消失;再往上滑动到距离顶部一定距离,顶部通栏再次出现;滚动条往上滑动也会出现(注意CSS样式中的渐变设置)
注意: 往下滑动到距离顶部一定距离,顶部通栏消失:再往上滑动到距离顶部一定距离,顶部通栏再次出现:该效果的关键点是比较当前滑动距离和自己设置的top值 滚动条往上滑动也会出现:该效果的关键点时比较上次 ...
- html页面下拉条位置,iframe滚动条位置控制
javascript中如可控制iframe的滚动条位置 我做了一个聊天室,嵌套了两个iframe,一个name叫mainframe,用来显示聊滚动条始终在最下端: window.οnlοad=func ...
- iframe滚动条设置
iframe滚动条设置 如果untitled3.html页中文字超过一屏的话,就会出现了垂直滚动条,在IE7.FF下都是不出现水平滚动条,但在IE6下会出现. 在网上找了两种方法如下: 在<bo ...
最新文章
- springboot打成jar后获取classpath下的文件
- Visual studio 利用Nuget 控制台安装已经下载好的插件
- 金融风控实战——有监督分箱
- 【SSH网上商城项目实战19】订单信息的级联入库以及页面的缓存问题
- 推荐一个好库 热键监听 hotkeys-js
- [密码学基础][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第32篇]基于博弈的证明和基于模拟的证明
- 论文浅尝 | 可建模语义分层的知识图谱补全方法
- 剑指offer面试题[20]-顺时针打印矩阵
- Zookeeper C API 指南二(监视(Wathes), 基本常量和结构体介绍)
- java解决合并两个有序链表问题
- 【详解】服务可用性详细说明及其解决方案
- CRichEditDoc下保存文档出现\rtf1\ansi\ansicpg936\deff0的解决方法
- 博士生DIY超级显微镜,直接看到原子
- 幼麟・闪影・奎特尔~2019不太冷!
- 西瓜视频解析原理及源码,使用CRC32的签名算法,获得视频源地址
- 百度与吉利联合制造智能电动汽车;霍尼韦尔2020年度10大创新科技揭晓 | 美通企业日报...
- 刺激战场电脑版android,绝地求生刺激战场怎么用电脑玩 绝地求生刺激战场pc版安装攻略...
- 面经手册 · 第7篇《ArrayList也这么多知识?一个指定位置插入就把谢飞机面晕了!》
- 软著申请你还不会?我是这样申请的
- 脚本录制软件python 按键精灵 tc_用动作脚本的方式介绍如何使用按键精灵的录制功能...
热门文章
- 联想OEM XP Pro SP3 原版镜像与联想 OEM Vista SP1简体中文旗舰版下载
- 从哲学角度看***之关于***与高智商电影
- Android Studio 1.5+ 中调试Native和Java代码
- Matlab 数据结构
- java实战:jsp快速实现简单易用的信息登记与查询功能
- 云计算机技术应用专业实训室建设,云桌面技术在高校实训室建设中的应用
- 矩阵按键(按下按键S1到S16,数码管显示0到F)
- 天语k-touch w700刷机
- MFC的Ribbon界面按钮是灰色的问题解决办法
- Camtasia Studio2022简体中文安装激活教程