iframe去掉滚动条依然能滚动的方法

 时间:2026-02-14 13:01:50

1、打开网站开发工具新建一个HTML页面

iframe去掉滚动条依然能滚动的方法

2、编写HTML代码

核心代码:

<div class="iframe-wrap">

   <iframe src="iframe.html" class="iframe-box"></iframe>

</div>

iframe去掉滚动条依然能滚动的方法

3、编写CSS代码

核心代码:

.iframe-wrap{

position: relative;

overflow: hidden;

width: 300px; height: 150px; background: #eee;

}

.iframe{

width: 100%; border: none;

position: absolute; right: -20px; top: 0; bottom: 0;

overflow-x: hidden; overflow-y: scroll;

}

iframe去掉滚动条依然能滚动的方法

4、在新建一个HTML页面(也就是需要嵌套的iframe页面)

核心代码:

<body >

<h1>《断章》--卞之琳</h1>

<p>你站在桥上看风景</p>

<p>看风景人在楼上看你</p>

<p>明月装饰了你的窗子</p>

<p>你装饰了别人的梦</p>

</body>

iframe去掉滚动条依然能滚动的方法

5、给iframe页面添加修饰样式

核心代码:

p{ 

height: 50px; line-height: 50px; 

font-size: 16px;

}

iframe去掉滚动条依然能滚动的方法

6、打开浏览器浏览刚才我们制作的页面,测试效果(可以使用滚轮和键盘上下键进行测试) 我们可以发现页面上没有滚动条,而且iframe依然可以滚动!

完整代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>iframe去掉滚动条依然能滚动的方法</title>

<style type="text/css">

*{margin: 0; padding: 0;}

.iframe-wrap{

position: relative;

overflow: hidden;

width: 300px; height: 150px; background: #eee;

}

.iframe{

width: 100%; border: none;

position: absolute; right: -20px; top: 0; bottom: 0;

overflow-x: hidden; overflow-y: scroll;

}

</style>

</head>

<body>

<div>

<iframe src="iframe.html"></iframe>

</div>

</body>

</html>

iframe去掉滚动条依然能滚动的方法

  • TIM怎么关闭锁屏显示消息弹框
  • Win11如何打开Windows文件夹
  • PowerDesigner15.1安装
  • 如何在jquery中找到一个div中的img属性
  • Visio2016如何新建基本框图?
  • 热门搜索
    徐州旅游团 芙蓉镇旅游 经典旅游路线 北京国际旅游博览会 长安旅游 旅游服务质量 临沧旅游 大西北旅游 土耳其旅游景点 旅游团价格表