网络-如何在iframe中不禁用但隐藏滚动条？

Question

My website is available here . 我的网站可以在这里找到。

Problem is that I'm getting a double scroll because I used an iframe to display content in each page of my website. 问题是我得到了两次滚动，因为我使用iframe在网站的每个页面中显示内容。

I tried this: 我尝试了这个：

<iframe ... scrollable="no"></iframe>

and also tried to override the default css by using !important: 并且还尝试使用！important覆盖默认的CSS：

.fancybox-overlay, .fancybox-overlay-fixed {
    overflow: hidden !important;
}

But nothing is working. 但是没有任何效果。

How to fix that? 如何解决？

Answer 1

How about making your parent element fit the page so that the only scrollbar is the one inside the iFrame and not the other way? 如何使您的父元素适合页面，以使唯一的滚动条是iFrame滚动条，而不是相反的滚动条？

You can do something like this: 您可以执行以下操作：

 .fit { position: absolute; top: 0; bottom: 0; left: 0; right: 0 } .Parent { border: 2px solid red } iframe { border: 2px solid green; height: 100%; width: 100%; display: block } * { box-sizing: border-box }

 <body> <div class='Parent fit'> <iframe class='fit' src='http://stackoverflow.com'></iframe> </div> </body>

Note: 注意：

Green border is the iframe 绿色边框是iframe
Red border is the parent container 红色边框是父容器

Answer 2

You need to use the scrolling attribute not scrallable . 您需要使用not scrallable的scrolling属性。

source https://www.w3schools.com/tags/att_iframe_scrolling.asp 来源https://www.w3schools.com/tags/att_iframe_scrolling.asp

Answer 3

Try this 尝试这个

<iframe src="https://bing.com" 
        class="this" 
        scrolling="no" >
</iframe>

 .this { width: 200px; height: 200px; overflow-y: hidden; }

 <iframe src="http://bing.com" class="this" scrolling="no" > </iframe>

网络-如何在iframe中不禁用但隐藏滚动条？

问题描述

3 个解决方案

解决方案1
3 已采纳 2017-04-03 21:48:53

Note: 注意：

解决方案2
0 2017-04-03 21:46:32

解决方案3
0 2017-04-03 21:52:39

网络-如何在iframe中不禁用但隐藏滚动条？

问题描述

3 个解决方案

解决方案1 3 已采纳 2017-04-03 21:48:53

Note: 注意：

解决方案2 0 2017-04-03 21:46:32

解决方案3 0 2017-04-03 21:52:39

解决方案1
3 已采纳 2017-04-03 21:48:53

解决方案2
0 2017-04-03 21:46:32

解决方案3
0 2017-04-03 21:52:39