把iframe的滚动条作为页面滚动条

最新推荐文章于 2024-03-25 19:16:23 发布
原创 最新推荐文章于 2024-03-25 19:16:23 发布 · 861 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#iframe #scroll #浏览器 #css

本文介绍了一种将iframe内的滚动条用作整个页面滚动条的方法。首先通过CSS设置页面body的边距为0，接着使用iframe填充整个页面，并将页面本身的滚动条属性设置为不可见。这样就可以实现用iframe的滚动条来控制整个页面的滚动。

把iframe的滚动条作为页面滚动条：

 <IFRAME frameBorder='0' id="loadPage"  width='100%' height='100%' src=''>对不起，您的浏览器不支持IFRAME!</IFRAME>

第一步：设置css样式。

  <style type="text/css">
  <!--
   body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
   }
  -->
  </style>

第二步：把页面的滚动条隐藏

<body scroll="no">

                                                                                                                   by lcwlyl
 

网络精灵
关注
外部滚动条控制iframe
11-16
外部滚动条控制iframe外部滚动条控制iframe
JS去除iframe滚动条的方法
10-24
去除iframe滚动条的一种常见做法是通过JavaScript修改iframe的属性。在给定文件中，介绍了如何通过操作`scrolling`属性来实现这一目标。`scrolling`属性是一个用于控制是否显示滚动条的属性。在HTML标准中，它可以...
js代码：实现主页面滚动条随iframe里的内容自动调整
weixin_33766168的博客
07-24 289
由于网页中使用到了iframe，如果iframe中的内容超过主页面的范围后，在iframe的四周会出现滚动条，这样和主页面很不协调，所以在网上找了很久，终于找到一段代码可以解决这个问题，代码如下： 这段代码放在<head></head>之间： <script language="Javascript">var getFFVersion=...
IFRAME滚动条的样式
Monkey Space
04-20 1049
一、预览效果：二、代码Test.htmlTest1.htmlBODY {}{ SCROLLBAR-FACE-COLOR: #e8e7e7;  SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;  SCROLLBAR-SHADOW-COLOR: #ffffff;  SCROLLBAR-3DLIGHT-COLOR: #cccccc;  SCROLLBAR-ARR
使用frame iframe 两个 滚动条
haove的专栏
02-03 1900
要想去掉外面的滚动条，保留ifrmame或者frame的滚动条的话，可以设置ifame的height百分比，往小处设置就会发现外面的滚动条越来越短，直至消失。（外部的滚动条要设置为自动哦）
将iframe的内容高度赋值给iframe本身高度，并隐藏iframe里面的垂直滚动条，使iframe和父页面看成是一个整体页面
u011511086的专栏
10-21 399
将iframe的内容高度赋值给iframe本身高度，并隐藏iframe里面的垂直滚动条，使iframe和父页面看成是一个整体页面 核心计算iframe的js代码 var ifr = document.getElementById('stageFrame'); //计算iframe高度 function calcHeight() { ifr.style.height = '700px'; //获取iframe里面的内容高度 var iDoc = ifr.contentDoc
JavaScript中关于iframe滚动条的去除和保留
11-27
下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧！ iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下...
layer弹出层 iframe层去掉滚动条的实例代码
10-18
在这个问题中，我们关注的是如何在layer弹出层中的iframe层去除滚动条，以保持页面的整洁和用户体验。 首先，让我们深入理解一下涉及到的几个概念： 1. **layer**：Layer是基于jQuery的一个轻量级的弹窗插件，提供...
在iframe中隐藏横向滚动条的方法大全
10-31
### 在iframe中隐藏横向滚动条的方法大全 ...通过上述方法，可以有效地管理`<iframe>`中的滚动条行为，提升用户体验的同时也增加了页面的整体美感。在实际操作中，开发者可以根据具体需求灵活选择合适的方法。
浏览器兼容问题项目总结（六） 页面嵌套多个iframe滚动条兼容性修改
澹若水的专栏
08-22 1512
本文转自：http://blog.youkuaiyun.com/u014744118/article/details/70792489最近几天一直在chrome和IE的兼容性问题上花费较多时间，将我在iframe这个问题上的一个坑给大家做个分享。iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM
html iframe随页面滚动,如何隐藏iframe的滚动条，但依然可以页面滚动
weixin_30957307的博客
06-04 2140
今天遇到一个这样的问题：网页中如何隐藏iframe中的垂直滚动条，但依然可以用滚轮实现页面滚动？？？我就想先把iframe定义宽度和高度，在设置overflow:hidden;呗，但是这样多余的部分会被隐藏掉。如果你想在主页面滚动能看到iframe页面隐藏的内容是不可以的。1、有人说可以视觉隐藏：在iframe外面加个DIV，这个DIV的宽度正好比里面的iframe的宽度要小一个滚动条的宽度，高度...
解决iframe滚动条问题
piscailei@blog.youkuaiyun.com
10-11 5981
解决方案一：去掉文件开头的文档声明。不使用"DOCTYPE "文档声明(详细代码在下面)的话很容易就过去了。但是不使用文档声明，一是代码不规范，二是不能获得文档的高度。 下面的代码执行的结果是pageHeight=160px;，而实际上B文件的高度（长度）是800px左右。var pageHeight = (document.body.clientHeight?document.bod
iframe，body，div三者滚动条重合的问题
a510750的专栏
06-09 2306
iframe是在body之中的，而frame，frameset是在body之外的
iframe关于滚动条的去除和保留
weixin_30555753的博客
11-16 672
iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？ 一：去掉全部的滚动条 第一个方法： iframe 有一个scrolling属性，它有 auto , yes , no 这三个值。 s...
完全搞定iframe（框架）里的滚动条！（一）
热门推荐
xpnew的技术blog
05-07 1万+
 完全搞定iframe（框架）里的滚动条！（一）说明：1、本文参考了网络上大量资料，本人在此深表感谢！2、本文假设读者，有一定的HTML、CSS、JS基础。3、本文讨论的目标是，通过A页面里的标记引用B网页之后，在A页面上出现滚动条这种情况的几种解决办法。4、因为篇幅的关系，文章被分成了两部分。通常情况下，（一）就能解决你的问题，（二）将会深入探讨这个问题和相关的解决方案。5、如果你觉得我啰嗦
iframe展示第三方页面修改滚动条样式
最新发布
为技术而生
03-25 2464
iframe展示第三方页面修改滚动条样式。 iframe定义一个内联框架，常用于嵌套另一个网页，并且实现网页间的互联互通。 在非同源中由于安全策略，对一些功能限制较大。
iframe滚动条样式
Silverlight,WPF,WCF
08-07 2139
Body { scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/ scrollbar-face-color: #333; /*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/ scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-colo
iframe滚动条样式设置
那片田，那片天~~
04-07 1万+
<br />用frame框架做网页时候可以设置滚动条样式，但用iframe时候就不能正常显示<br /><br />解决：把代码这句话<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">去掉就行了<br /> <br />原因：SCROLLBAR属性只有ie支持，firefox都不支持， 把文档声明的这句去掉，文档就由x
iframe出现滚动条问题
前端
08-12 8744
问题描述 .parent设定了高度，设置iframe height：100%,通过浏览器观察发现，外层div与iframe高度相同，为什么出现滚动条，发现没有padding/margin的影响 <div class="parent"> <iframe frameborder="no" style="width:100%;height:100%;" src="https://w...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值