直播商城源码,隐藏iframe滚动条,并禁止滑动
直播商城源码,隐藏iframe滚动条,并禁止滑动
外层元素设置 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;">
<iframe
style="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;">
<iframe
style="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滚动条,并禁止滑动, 更多内容欢迎关注之后的文章