iframe嵌套网页去掉嵌套网页的滚动条

最新推荐文章于 2025-07-03 13:25:54 发布

燃烧的小煤球~

最新推荐文章于 2025-07-03 13:25:54 发布

阅读量3.4k

点赞数 2

CC 4.0 BY-SA版权

文章标签： iframe 滚动条

本文链接：https://blog.youkuaiyun.com/qq_41022291/article/details/86706778

本文介绍了一种在Vue应用中通过CSS隐藏滚动条宽度和高度的方法，实现页面布局更加整洁美观，同时保持滚动功能。适用于追求细节完美的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#最大的外层{
width: 100%;
height: 100%;
overflow: auto;
}
/*滚动条整体部分*/
#最大的外层::-webkit-scrollbar{
  width:0;
  height:0;
}

我用的vue 就有个#APP 最大的外层我设置的这个

效果如下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

燃烧的小煤球~

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

iframe去除双滚动条

心若向阳无谓悲伤

06-07

3392

iframe嵌套的内容多的时候会自带滚动条一、问题描述二、问题处理1.思路2.实现三、效果一、问题描述当iframe嵌套的内容多的时候会自带滚动条，致使出现双滚动条，如图二、问题处理 1.思路使得iframe的高度和自动根据内容的大小进行调控 2.实现 1、父页面增加以下内容，即根据页面内容动态给iframe高度的赋值： <script type="text/javascript"> function setIframeHeight() { var iframe

使用Iframe标签嵌套的页面滚动条

weixin_44548473的博客

07-18

4526

开发工具与关键技术： Vs 、使用Iframe标签嵌套的页面滚动条 作者：木有窝的鸟~小通撰写时间：2019年7月17日见过滚动条的小窗口吗，出现滚动条可以根据屏幕的大小来设置。一般iframe标签可以用于页面嵌套。平时写的小窗口也可以用iframe标签来写。那么在页面嵌套中呢，它可以设置宽度，而设置比较小的宽度的时候页面超出部分会出现滚动条。正因为如此，其实运用也比较广泛。 1、为了节省视...

2 条评论您还未登录，请先登录后发表或查看评论

iframe嵌入的页面影藏滚动条

shanshanbao的博客

08-19

412

iframe嵌入的页面影藏滚动条

隐藏iframe滚动条，并禁止滑动

weixin_45559449的博客

03-20

1万+

当我们通过 iframe 展示图片，或是通过 iframe 展示 PDF文件时，如果图片和 PDF 超出 iframe设置的宽高，就会出现横纵向的滚动条，如下图。所以， iframe 展示图片时可以通过设置 scrolling=“no” 属性来隐藏滚动条，iframe 展示 PDF文件时设置 scrolling=“no” 属性并不能隐藏滚动条。如果 iframe 存在纵向滚动条，则 iframe宽度=原宽度+滚动条宽度，即width: calc(100% + 17px)；

页面＜iframe height=‘100%‘ /＞时有纵向滚动条

最新发布

qnxb0628的博客

07-03

520

iframe=inline iframe它是一个内联元素，默认是跟 baseline 对齐的，iframe 后面有个看不见摸不着的行。从而影响空白节点的 line-height 是 0，即不占高度。，空白节点占据着高度，iframe与空白节点的基线对齐，导致了div被撑开，从而出现滚动条。第三种：改变 iframe 的内联元素性质，改为：display: block;第一种：设置 iframe 的 vertical-align: top;最后：个人的一点学习记录，<如有疏漏或谬误，望码友能不吝赐教~>

多层嵌套iframe如何去除滚动条

m0_37790484的博客

03-09

923

让iframe滚动条问题不在困扰你

iframe高度自适应，取消滚动条

baidu_38027860的博客

05-10

8899

项目中碰到左侧是一个列表，是固定定位，点击不同的列表选项右侧引入不同的iframe地址文件，但是iframe设置属性的时候高度只识别px，设置百分百之类的都无效，并且不想要iframe本身的滚动条，页面只需要一个默认的滚动条。实现效果如下图：html代码： <iframe src="yuanchengkaipiao.html" id="dizhi"></iframe>...

vue3 封装一个横向滚动条，不显示滚动条，但是可以用鼠标或者手指滚动，需兼容Mac等浏览器，并举例...

weixin_42605397的博客

01-17

748

可以在 Vue3 中使用自定义指令来封装横向滚动条。首先，在 main.js 中定义指令： Vue.directive('horizontal-scroll', { bind(el, binding) { el.addEventListener('wheel', e => { if (e.deltaY) { el.scrollLeft += e.del...

JavaScript中关于iframe滚动条的去除和保留

11-27

下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧！ iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下...

使用iframe在网页中嵌入其他网页的方法

09-28

<iframe src="目标URL" width="宽度" height="高度" frameborder="边框" marginwidth="外边距宽度" marginheight="外边距高度" scrolling="滚动条" allowtransparency="透明度"></iframe> ``` 1. `src` 属性：这是`...

在vue中实现嵌套页面(iframe)

10-15

在这个例子中，`src`属性指定了`iframe`要加载的页面路径，`width`和`height`定义了`iframe`的尺寸，`frameborder="0"`用于去除边框，`scrolling="auto"`控制滚动条的显示，而`style`属性设置了`iframe`的位置。...

JS去除iframe滚动条的方法

10-24

主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下

WEB页面中嵌套的滚动窗口实例页面

07-11

“WEB页面中嵌套的滚动窗口”中的演示文件。

html5 iframe隐藏滚动条,教你在iframe标签中制作滚动条样式

weixin_36213934的博客

06-03

6512

首先让我们看看HTMLiframe标签中关于滚动条的去留和保存：iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？一：去掉全部的滚动条第一个方法：iframe有一个scrolling属性，它有auto,yes,no这三个值。scrolling:auto-----在需要的时候滚动条出现...

去掉iframe滚动条（好使！）

热门推荐

weixin_45897915的博客

04-09

1万+

iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？一：去掉全部的滚动条 第一个方法： iframe 有一个scrolling属性，它有 auto , yes , no 这三个值。 scrol...

去除带有iframe页面中的2个滚动条

qingfeng2556的博客

06-10

7541

去除带有iframe页面中的2个滚动条 (2011-05-12 23:26:04) 转载▼ 标签：去除带有 iframe页面 2个滚动条 分类：菜鸟学习录--（技术篇）用iframe的人都知道，（大神请飘过……）右边的iframe总是带着滚动条，而页面上默认也有滚动条，一个页面2

iframe嵌套页面

Marble Race

04-03

6115

iframe嵌套页面方法 <body style="margin:0px;"> <iframe src="" width="100%" height="100%" frameborder="0" ></iframe> </body> iframe常用属性: frameborder:是否显示边框，1(yes),0(no) height:框架作为...

浏览器兼容问题项目总结（六）页面嵌套多个iframe滚动条兼容性修改

前端产品工程师

04-26

3452

最近几天一直在chrome和IE的兼容性问题上花费较多时间，将我在iframe这个问题上的一个坑给大家做个分享。 iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。使用 iframe 的页面一般不会包含太多 iframe，所以创建 DOM

iframe嵌套页面出现滚动条

04-28

### 解决方案 #### 方法一：隐藏 `iframe` 的滚动条 可以通过设置 `iframe` 的 CSS 属性来隐藏滚动条。具体做法是将 `scrolling` 属性设置为 `'no'`，并使用 CSS 设置 `overflow: hidden;`。 ```css iframe { scrolling: no; overflow: hidden; } ``` 这种方法适用于不想让用户看到滚动条的情况，但需要注意的是，即使隐藏了滚动条，如果内容超出了 `iframe` 的尺寸，仍然可能存在不可见的内容区域[^1]。 --- #### 方法二：调整 `iframe` 的宽高以匹配内部页面为了避免滚动条的出现，可以确保 `iframe` 的宽度和高度与嵌入页面的实际尺寸完全一致。这样就不会有溢出的部分导致滚动条的产生。 ```css iframe { width: 100%; height: calc(100vh - 60px); /* 根据实际需求动态调整 */ display: block; /* 将 iframe 设为块级元素 */ } ``` 这里的关键在于将 `iframe` 设置为块级元素 (`display: block`) 并精确计算其高度，从而避免多余的空白或滚动条[^2]。 --- #### 方法三：父容器控制滚动行为如果希望保留滚动功能但仅限于某个特定区域，则可以在包裹 `iframe` 的外层 `div` 上应用滚动逻辑，而不是直接作用于 `iframe` 自身。 ```html <div style="width: 300px; height: 200px; overflow: auto;"> <iframe src="example.html" frameborder="0" scrolling="no" style="width: 100%; height: 100%;"></iframe> </div> ``` 这种方式允许用户在一个固定大小的区域内滚动内容，而不影响整个页面布局。 --- #### 方法四：JavaScript 动态适配当嵌套页面的高度不确定时，可以借助 JavaScript 来动态调整 `iframe` 的高度，使其刚好容纳全部内容。 ```javascript function adjustIframeHeight() { const iframe = document.getElementById('myIframe'); try { iframe.style.height = `${iframe.contentWindow.document.body.scrollHeight}px`; } catch (e) { console.error('跨域错误:', e); } } window.onload = function () { adjustIframeHeight(); }; ``` 此脚本会在页面加载完成后自动调整 `iframe` 的高度至适合值。不过需要注意，如果是跨域请求，由于安全策略限制，可能无法访问子页面的信息[^4]。 --- ### 注意事项 - 如果涉及 **跨域** 嵌套页面，某些操作（如读取文档高度）会被浏览器阻止。 - 对于移动端设备，还需测试不同分辨率下的表现效果，以免因缩放比例引起意外滚动现象。 ---