开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

隐藏Iframe滚动条，但仍可滚动

，可以通过以下方法实现：

CSS样式：可以使用CSS样式来隐藏Iframe的滚动条。通过设置Iframe的样式属性overflow: hidden;可以隐藏滚动条。但是这样会导致Iframe内容无法滚动。
JavaScript：可以使用JavaScript来实现隐藏Iframe滚动条，同时保持内容可滚动。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
    #myIframe {
        width: 100%;
        height: 400px;
        border: none;
        overflow: hidden;
    }
</style>
<script>
    function hideScrollbar() {
        var iframe = document.getElementById("myIframe");
        iframe.contentWindow.document.body.style.overflow = "hidden";
    }
</script>
</head>
<body>
    <button onclick="hideScrollbar()">隐藏滚动条</button>
    <iframe id="myIframe" src="your_url_here"></iframe>
</body>
</html>

在上述代码中，通过设置overflow: hidden;样式属性来隐藏Iframe的滚动条。通过JavaScript中的hideScrollbar()函数，可以在点击按钮时隐藏Iframe内部内容的滚动条。

这样，即可实现隐藏Iframe滚动条，但仍可滚动的效果。

推荐的腾讯云相关产品：腾讯云CDN（内容分发网络）。腾讯云CDN是一种分布式部署的网络加速服务，可以提供快速、稳定的内容分发，加速网站访问速度，减少用户访问延迟。您可以通过腾讯云CDN来加速Iframe中的内容传输，提升用户体验。

腾讯云CDN产品介绍链接地址：腾讯云CDN

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

iframe关于滚动条的去除和保留(转载)

iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？

02

iframe 滚动条

在调用框架或者多级 iframe 的时候，经常会出现多个滚动条或者左右都有的情况，需要我们进行调整，现就设置方法记录如下。

02

JQuery iframe宽高度自适应浏览器窗口大小的解决方法

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

02

html div 隐藏滚动条样式,div滚动条样式隐藏与显示

DIV滚动条样式是可以设置的，CSS滚动条同样也可以显示与隐藏，对div设置滚动条，设置其横向滚动条和纵向滚动条样式应该怎么做呢？

06

html滚动条使用，以及页面有多个div块，如何让body页面不使用滚动条，只在某个div内使用滚动条

2，页面有多个div块，如何让body页面不使用滚动条，只在某个div内使用滚动条

03

jquery nicescroll 配置参数

jQuery滚动条插件兼容ie6+、手机、ipad http://www.areaaperta.com/nicescroll/ jQuery(function($){ $("#scrollInner").niceScroll({ touchbehavior:false, cursorcolor:"#398F70", cursoropacitymax:1, cursorwidth:5, cursorborder:

08

见识了电信流氓插iframe+分析解决方案

这两天回了家从感觉浏览器行为有些怪异，有些熟悉的网页无故出现了额外的竖直滚动条，有时候是两个，有时候甚至到了3个！我是用的是chrome浏览器，像现在wp后台添加文章的页面就是有3个竖直滚动条的。

02

备忘：base 标签和ShowModalDialog 、showModelessDialog

本文介绍了如何使用Base标签和ShowModalDialog、showModelessDialog方法在网页中弹出对话框。其中，Base标签用于在网页中显示对话框，ShowModalDialog和showModelessDialog方法则用于创建模态和非模态的对话框。这些方法可以用于向用户显示信息、获取用户输入以及执行其他操作。

JavaScript代码获取浏览器的可视高、文档滚动高和滚动距离

说明：这段代码用于获取浏览器窗口的可视高度。它首先检查 document.body.clientHeight 和 document.documentElement.clientHeight 是否都存在，然后根据情况选择较小的值作为可视高度。如果其中一个不存在，则将另一个值作为可视高度。

00

html多媒体

<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>

03

iframe自适应高度原

同时总结下经常用的高度 contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。 contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。 document.body.clientWidth 可见区域内容的宽度（不包含边框，如果水平有滚动条，不显示全部内容的宽度） document.body.clientHeight 全部内容的高度（如果垂直有滚动条，也显示全部内容的高度） document.body.offsetWidth 可见区域内容的宽度（含边框，如果水平有滚动条，不显示全部内容的宽度） document.body.offsetHeight 全部内容的高度（如果垂直有滚动条，也显示全部内容的高度） document.body.scrollWidth 内容的宽度（含边框,如果有滚动则是包含整个页面的内容的宽度，即拖动滚动条后看到的所有内容） document.body.scrollHeight 全部内容的高度

02

【Go 语言社区】iframe去边框，无边框，使用大全

<iframe src=”you page’s url” width=”100″ height=”30″ frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes”></iframe> <iframe runat="server" src="you page's url" width="750" height="30" frameborder="no" border="

07

iframe标签（页面嵌套）

上面两张图是两个不同的页面但是它们的基本框架都是一样，每点击一次左边的导航栏改变的都是中间的内容区域。也就是说共同的框架都是没有改变的，改变的是中间的内容。

01

CefSharp自定义滚动条样式

在WinForm/WPF中使用CefSharp混合开发时，通常需要自定义滚动条样式，以保证应用的整体风格统一。本文将给出一个简单的示例介绍如何自定义CefSharp中滚动条的样式。

03

iframe参数详解

<iframe src=”you page’s url” width=”100″ height=”30″ frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes”></iframe>

03

Easyui 去除jquery-easui tab页div自带滚动条

打开tab页面时，自动载入一个iframe页面，除了iframe页面本身会出现一个滚动条，tab标签页也出现一个滚动条，如下图所示，需求就是去掉tab页面的滚动条

02

Selenium4+Python3系列（七） - Iframe、Select控件、交互式弹出框、执行JS、Cookie操作

二次管控：先定位select框，再定位select里的选项,通过Select对象进行强转，来调用select控件中的Api来达到操作的目的。

01

如何实现iframe(嵌入式帧)的自适应高度

好几次看到有人提问问到如何实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象，刚好我在工作中也碰到了类似问题，于是上网翻查，东抄抄西看看，弄出来这么一个函数，贴到页面里面就能用了。不敢独享，大家要是觉得有用，欢迎使用

02

你会用到的 15个前端小知识

元素宽高设置为 0，通过 border 属性来设置，让其它三个方向的 border 颜色为透明或者和背景色保持一致，剩余一条 border 的颜色设置为需要的颜色。

01

iframe 自适应高度的多种实现方式

需求：实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。

03

自适应页面高度

困扰了我很久的问题：我很想让一个框架左侧的菜单（控件或者是折叠的LI或者别的），能够自动适应浏览器的变化。因为即使是同一分辨率，页面中的实际高度也不同。不过非常遗憾，网上的文章可谓无数，但基本都不能解决问题。基本上是这两类： 1、页面中嵌了IFrame，希望Iframe不出现滚动条，大小刚刚和页面大小一样，这个基本方法，都是用页面的document.body.scrollHeight属性来完成的。其实我也是用Iframe，因为我的折叠菜单是用css+div实现的，没法用滚动条，所有我

07

iframe属性设置

<iframe runat=”server” src=”you page’s url” width=”750″ height=”30″ frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes”></iframe>

01

iframe内部DOM设置样式引发的思考

上篇文章大致分享了web端的拍照方案。一个是input，另外一个是getUserMedia方法，实际上它是webRtc的一个API。

02

其他标签及框架集

今天学习了其他一些标签以及框架集。 <marquee> ... </marquee> 1 <marquee direction="down" height="300" behavior="scroll" loop="2" scrollamount="12" scrolldelay="12" bgcolor="#666666"> 2 3 </marquee> 移动效果包含

07

[代码参考]在html文件调用其它html文件的几种方法

发表评论 680 views A+ 所属分类：技术一、iframe 方式 [代码]
二、object 方式 [代码]三、Behavior的download方式 [代码] iframe比较灵活，可以自由设定 iframe 的大小、位置、是否有滚动条等，但有时页面上可能会出现两根滚动条，因此 iframe 比较适用于调入规定的小尺寸页面，并能做到完全融合在一起。 object方式类似于页面集成，举个例子：如果 a.htm 中包含了 b.htm，但浏览器实际看到的代码是：

03

Visual Studio 2008 每日提示(四)

#031、把编辑器的背景变成黑色原文地址:http://blogs.msdn.com/saraford/archive/2007/09/06/did-you-know-how-to-change-the-editor-background-to-black.aspx 操作步骤：菜单：工具+选项+环境+字体和颜色，在”显示项“选项中选择”纯文本“，你可以修改”项前景色“来为白色，修改”项背景色“来为黑色评论：虽然背景是黑色比较酷，不过我不习惯，感觉比白色背景还费眼睛 #032、用Ctrl+Sh

05

iframe出现双层滚动条解决方案

在开发中出现一个iframe双滚动条问题，查了很多资料，网上的解决方案是定义iframe的onload事件，加载时重新加载高度，但是由于项目中页面渲染完成后，点击按钮动态生成数据，这时候上面的方案就不可行了。

02

RTSP协议视频智能分析平台EasyNVR分享界面ifarm嵌套云端控制显示优化

TSINGSEE青犀视频云边端架构视频智能分析平台经常会用到页面嵌套的功能，比如EasyGBS的页面嵌套（EasyGBS的分享界面调用ifram嵌套后出现滚动条）等。

00

视频流媒体平台EasyNVR使用iframe集成到页面时如何去除页面的滚动条？

使用过我们的流媒体服务器的都知道，我们的服务器支持集成到自己的项目平台上，因此不少使用我们流媒体服务器的用户，都实现了将直播视频流集成到自己的平台。

02

webqq中自适应宽度的JS代码和隐藏页面横向滚动条的css样式

webqq 中自适应宽度的JS代码 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script><script src="http://web.qstatic.com/jsapi/alloy.api.js"></script><script type="text/javascript"> try { alloy.onReady(function(){

03

两行CSS让长列表性能渲染提升7倍！

这两个 CSS 属性，主要针对长列表渲染。有长列表渲染需求的同学，可一定不能错过咯~

01

iframe属性参数「建议收藏」

<iframe width=420 height=330 name=aa frameborder=0 src=http://www.liuyebo.com></iframe>，然后，网页上的超链接语句应该写为：

02

移动端的那些坑

Safari下使用border-image，不能设置border-color: transparent。

03

iframe框架及优缺点

HTML5不再支持使用frame，关于frame与iframe的区别，可以参阅 iframe与frame的区别

02

Selenium（思维导图）

Selenium（思维导图）目录 1、浏览器基本操作 2、元素查找方法 3、鼠标和键盘事件 4、窗口/iframe切换 5、select下拉框 6、弹框 7、JS处理（滚动条等） 8、框架 9、selenium常见异常 10、断言 11、cookie处理 12、显示等待 13、JS原生查找元素方法 14、思路集合 15、文件上传/下载 16、元素信息 1、浏览器基本操作 2、元素查找方法 find_element_by_css_selector() find_element_by_xpath()

02

解决iframe高度自适应

iframe的高度不会随着页面高度的变化而变化，可能会导致页面显示不全，或者页面下方有空白的问题。

04

php学习之html属性-框架（八）

普通框架语法： <frameset> //划分用的 <frame> //显示用的 <frame> ……. <noframe>直接显示的描述文字</noframe> //描述 </frameset> 目的：框架就是对当前页面进行分割，划分成每个小窗口，每个小窗口显示不同的页面作用：用于后台的制作，前台不再推荐使用，兼容性不好注意：如果是框架结果的网页，不能有body，而且他的文档头是frameset的，而不是普通文档头DOCTYPE 框架的文档头<!DOCTYPE html

03

点击劫持漏洞的学习及利用之自己制作页面过程

该文章首发于：奇安信攻防社区 https://forum.butian.net/share/436

01

用Javascript获取页面元素的位置

制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。一、网页的大小和浏览器窗口的大小首先，要明确两个基本概念。一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样式表决定。浏览器窗口的大小，则是指在浏览器窗口中看到的那部分网页面积，又叫做viewport（视口）。很显然，如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器

07

JQuery 获取元素到浏览器可视窗口边缘的距离

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

02

HTML实用的网页代码大全[通俗易懂]

在新窗口打开连接：要输入的文字（

06

iframe标签属性说明详解[通俗易懂]

Iframe 标签详解<Iframe src=”example.htm” width=”300″ heitht=”100″></IFRAME> example.htm 是被嵌入的页面，标签 <IFRAME> 还有一些可用的参数设置如下： marginwidth:网页中内容在表格右侧的预留宽度；例如：marginwidth=”20″，单位是 pix，下同。 marginheight:网页中内容在表格顶部预留的高度； hspace:网页右上角的的横坐标； vspace:网页右上角的纵坐标； frameborder:是否显示边缘；填”1″表示”是”，填”0″表示”否” scrolling:是否出现滚动条；填”1″表示”是”，填”0″表示”否” 在HTM(HTML)文件中是否可以像PHP、ASP文件一样嵌入其他文件呢？下面笔者介绍用iframe来实现的方法。 iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。其部分属性简介如下： name：内嵌帧名称 width：内嵌帧宽度(可用像素值或百分比) height：内嵌帧高度(可用像素值或百分比) frameborder：内嵌帧边框 marginwidth：帧内文本的左右页边距 marginheight：帧内文本的上下页边距 scrolling：是否出现滚动条(“auto”为自动，“yes”为显示，“no”为不显示) src：内嵌入文件的地址 style：内嵌文档的样式(如设置文档背景等) allowtransparency：是否允许透明明白了以上属性后，我们可用以下代码实现，在main.htm中把samper.htm文件的内容显示在一个高度为80、宽度为100%、自动显示边框的内嵌帧中让iframe自动适应内容的高度

02

EasyUi 动态tabs 在实际项目中遇到问题与解决方法

刚开始是把iframe的设置成固定的高度，当把iframe设置成scrolling="auto"时，，这时鼠标移到iframe上会有滚动条，如果设置成scrolling="no"超出内容的话就没有滚动条了，看样子把iframe设置成固定高度是不合适的，改成iframe的高度为内容的高度。由于内容使用了bootstrap table插件，table的高度要根据窗口的高度变化，iframe的高度与内容的高度有关，首先需要确定table的高度，可以根据localStorage设置高度，table的高度获取高度可以完美解决。

02

Python Selenium库的使用「建议收藏」

Selenium是一个用于测试网站的自动化测试工具，支持各种浏览器包括Chrome、Firefox、Safari等主流界面浏览器，同时也支持phantomJS无界面浏览器。

01

iframe框根据内容自适应高度(100%可用)

iframe框根据内容自适应高度(100%可用) HTML: <iframe id="iframe" src="自己写地址" name="content" frameborder="0" style="width: 100%;height: 100vh;"></iframe> script: <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <script typ

02

软件测试面试题分享-No.5

会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。cookie通过在客户端记录信息确定用户身份，session通过在服务器端记录信息确定用户身份

04

selenium常用汇总

目录 1、浏览器基本操作 2、元素查找方法 3、鼠标和键盘事件 4、窗口/iframe切换 5、select下拉框 6、弹框 7、JS处理（滚动条等） 8、框架 9、selenium常见异常 10、断

00

第四章内嵌框架的使用

学习目标：了解内嵌框架 ---- 学习内容：内嵌框架标签<iframe></iframe> 可以将文档A嵌入在另一个文档B中显示优点： 1.保持网站风格一致 2.灵活性与方便性 3.提高网页下载速度内嵌框架的使用 ---- <iframe scr="引用的页面地址" width="宽度" height="高度" name="框架名字" frameborder="是否显示边框" scrolling="是否出现滚动条"> frameborder="1" 1表示显示 0表示不显示 scrol

03

HTML篇(003)-iframe 框架有那些优缺点？

答案：优点： iframe 能够原封不动的把嵌入的网页展现出来。如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。缺点：框架结构中出现各种滚动条 iframe 会阻塞主页面的 Onload 事件搜索引擎的检索程序无法解读这种页面，不利

01

Web自动化必会「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」

Dom 对象里面涉及元素定位以及对元素的修改。因为对元素操作当中涉及的一些 js 操作，js 基本语法要会用。得要掌握前端的基本用法。为什么要元素定位？因为找到这个元素，就能告诉代码要找谁要做什么。

00

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭