直播商城源码,隐藏iframe滚动条,并禁止滑动

直播商城源码,隐藏iframe滚动条,并禁止滑动

外层元素设置 overflow: hidden 隐藏滚动条

在 iframe 外层包裹一个 div 标签,div 与 iframe 宽高相同,并设置 overflow: hidden,

 

根据实际情况,重新设置 iframe 的宽高,已知浏览器滚动条宽度为 17px,

 

如果 iframe 存在纵向滚动条,则 iframe宽度=原宽度+滚动条宽度,即width: calc(100% + 17px);

 

如果 iframe 存在横向滚动条,则 iframe高度=原高度+滚动条宽度,即height: calc(100% + 17px)。

 

1
<br><!-- iframe展示的是图片 --><br><div style="width: 300px; height: 400px; overflow: hidden;"><br>  <iframe<br>    style="width: calc(100% + 17px); height: calc(100% + 17px); pointer-events: none;"<br>    src="https://img2.baidu.com/it/u=1730484486,1064790066&fm=253&fmt=auto&app=138&f=JPEG?w=747&h=500"><br>  </iframe><br></div><br><!-- iframe展示的是PDF --><br><div style="width: 300px; height: 400px; overflow: hidden;"><br>  <iframe<br>    style="width: calc(100% + 17px); pointer-events: none;"<br>    src="https://www.huakesy.com.cn/fastfile/group1/M00/00/99/Cm7Q2mP_AxyACCSOADZktRoWysI982.pdf#toolbar=0"><br>  </iframe><br></div>

 以上就是直播商城源码,隐藏iframe滚动条,并禁止滑动, 更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(19)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
历史上的今天:
2022-09-20 直播电商平台开发,仿各个APP的购物车效果
2022-09-20 直播源码开发,前端js实现时间倒计时,天,时,分,秒
2022-09-20 直播平台搭建源码,通过 JS 读取本地图片并预览在页面中
点击右上角即可分享
微信分享提示