iframe去掉竖向滚动条仍可以滚动

简介: iframe去掉竖向滚动条仍可以滚动

iframe内部页面代码:

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Title</title>

<style>

.inner-container{

position:absolute; left:0;

overflow-x:hidden;

overflow-y:scroll;

}

/* for Chrome 只针对谷歌浏览器*/

.inner-container::-webkit-scrollbar{

display:none;

}

</style>

</head>

<bodyclass="inner-container">

<h1>爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水</h1>

</body>

</html>

外部包含iframe的代码:

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Title</title>

<style>

.outer-container{

position:relative;

overflow:hidden;

}

</style>


</head>

<body>

<divclass="outer-container">

<iframemarginWidth=0marginHeight=0src="demo1.html"scrolling="auto"frameBorder=0width="100%"></iframe>

</div>

</body>

</html>

效果:

横向和竖向滚动条都消失,滚动鼠标的时候,内容仍然可以实现滚动效果。

目录
相关文章
axios设置请求头无效
axios设置请求头无效
1446 0
|
移动开发 开发框架 小程序
|
10月前
|
移动开发 前端开发 UED
React 音频进度条组件 Audio Progress Bar
在现代Web开发中,音频播放功能不可或缺。使用React构建音频进度条组件,不仅能实现播放控制和拖动跳转,还能确保代码的可维护性和复用性。本文介绍了如何利用HTML5 `&lt;audio&gt;`标签的基础功能、解决获取音频时长和当前时间的问题、动态更新进度条样式,并避免常见错误如忘记移除事件监听器和忽略跨浏览器兼容性。通过这些方法,开发者可以打造高质量的音频播放器,提升用户体验。
392 6
|
10月前
|
人工智能 自然语言处理 API
如何在 10 分钟内将 DeepSeek API 集成到您的应用程序
在AI时代,DeepSeek API以其先进的模型帮助企业快速集成自然语言处理等功能,无需深厚机器学习背景。通过Apipost工具,开发者可轻松测试、调试API并生成代码,优化工作流。本文介绍从身份验证到错误处理的完整流程,并提供相关资源链接,助您高效实现应用智能化。
|
12月前
|
NoSQL 关系型数据库 MySQL
分布式系统学习9:分布式锁
本文介绍了分布式系统中分布式锁的概念、实现方式及其应用场景。分布式锁用于在多个独立的JVM进程间确保资源的互斥访问,具备互斥、高可用、可重入和超时机制等特点。文章详细讲解了三种常见的分布式锁实现方式:基于Redis、Zookeeper和关系型数据库(如MySQL)。其中,Redis适合高性能场景,推荐使用Redisson库;Zookeeper适用于对一致性要求较高的场景,建议基于Curator框架实现;而基于数据库的方式性能较低,实际开发中较少使用。此外,还探讨了乐观锁和悲观锁的区别及适用场景,并介绍了如何通过Lua脚本和Redis的`SET`命令实现原子操作,以及Redisson的自动续期机
1129 7
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
446 1
|
Web App开发 存储 JavaScript
揭秘!Vue3.5响应式重构如何让内存占用减少56%
【11月更文挑战第9天】本文揭秘了 Vue3.5 响应式系统的优化,通过精细化的依赖收集、优化数据劫持方式和自动的观察者清理,使得内存占用减少了 56%。文章详细介绍了响应式系统的工作原理和传统内存占用因素,并通过性能测试和实际案例展示了优化效果。
482 3
|
Web App开发
Chrome——谷歌浏览器chrome如何模拟其他客户端
Chrome——谷歌浏览器chrome如何模拟其他客户端
370 1
Chrome——谷歌浏览器chrome如何模拟其他客户端
|
人工智能 JavaScript 开发工具
Awesome Tools,程序员常用高效实用工具、软件资源精选,办公效率提升利器!
Awesome Tools,程序员常用高效实用工具、软件资源精选,办公效率提升利器!
528 0