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

Question

事实上，我知道这个问题已经很多了，即使只是在stackoverflow中，但我找到的答案对我来说仍然不起作用——很多都是很久以前问过的。但是，我试图把一个iframe放在一个网页里，它来自同一个来源。问题是，每次我滚动时，这些烦人的滚动条都会出现。我尝试过做一些更改，比如添加overflow: hidden(这会使情况变得更糟——它禁用滚动！(、scrolling="no"(与溢出相同，禁用滚动(等等。有没有一种简单的方法可以删除iframe上的滚动条，但仍然可以滚动它？CSS更好，但如果在某些方面可以用JavaScript完成，那也没问题。非常感谢！！

更新：我的代码：

父页面：(｛%%｝和｛｛｝中的东西是jinja模板，我用它们来渲染模板(

<!-- 
@Author: Sam Zhang
@Date:   2020-04-10 20:05:53
@Last Modified by:   Sam Zhang
@Last Modified time: 2020-05-06 17:01:45
-->
{% extends 'base.html' %}
{% block title %}{{ keyword }}{% endblock %}
{% block top %}{% endblock %}
{% block content %}
<nav class="navbar navbar-dark bg-primary fixed-top">
<a class="navbar-brand" href="/">Guangdu <small class="text-light">Baidu</small></a>
<form method="post" class="container-fluid" style="max-width: 60%; margin-left: 0"
action="{{ url_for('baidu.index') }}">
<div class="input-group">
<input class="form-control" name="query" value="{{ keyword }}" id="search" autocomplete="off" type="search">
<button class="btn btn-success" type="submit">Guangdu</button>
</div>
</form>
<a onclick="changeTheme()" href="" class="text-white" title="Change theme"><i class="fa fa-adjust"></i></a>
</nav>
<br><br><br><br>
<div class="iframe-wrap">
<iframe id="iframe iframe-real" onload="$(this).fadeIn(500); show()" seamless="seamless" src="{{ url_for('baidu.search_s', q=keyword, page=cur) }}" class="iframe"></iframe>
</div>
<div class="d-flex justify-content-center" id="load-container">
<div class="spinner-grow text-primary" role="status" id="load">
<span class="sr-only" id="load-sr">Loading</span>
</div>
</div>
</div>
<script>
function hide() {
$("#iframe").hide();
$("#load-container").fadeIn(500);
$("#load").fadeIn(500);
$("#load-sr").fadeIn(500);
}
function show() {
$("#load-container").fadeOut(500);
$("#load").fadeOut(500);
$("#load-sr").fadeOut(500);
}
window.onload = hide();
</script>
{% endblock %}

我的网页在iframe:

<!-- 
@Author: Sam Zhang
@Date:   2020-04-10 20:05:53
@Last Modified by:   Sam Zhang
@Last Modified time: 2020-05-06 17:26:20
-->
{% extends 'base.html' %}
{% block title %}{{ keyword }}{% endblock %}
{% block top %}{% endblock %}
{% block body %}id="body" style="overflow:auto;height:100%" onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'"{% endblock %}
{% block content %}
<style>
</style>
<script>
function change(pn) {
this.parent.location.href = "{{ url_for('baidu.search') }}?q={{ keyword }}&page=" + pn;
}
</script>
{% if results %}
{% for result in results %}
{% if result.title and result.link %}
<div class="container">
{% if result.domain %}
<p class="text-success">
{{ result.domain }}
{% if result.path %}
&rsaquo;
{% for loc in result.path %}
{% if loop.index != result.path | length %}
{{ loc }}
&rsaquo;
{% else %}
{{ loc }}
{% endif %}
{% endfor %}
{% endif %}
</p>
{% endif %}
<h5 id="{{ loop.index }}h5"><a href="{{ result.link }}" target="_blank">{{ result.title }}</a></h5>
{% if result.time %}<p class="d-inline text-muted">{{ result.time }} &middot; </p>{% endif %}<p class="d-inline text-secondary text-wrap" id="{{ loop.index }}">{% if result.des %}{{ result.des }}{% else %}No description{% endif %}</p>
<hr>
</div>
{% endif %}
{% endfor %}
{% else %}
<div class="container">
<p>Keyword {{ keyword }} has np search results</p>
</div>
{% endif %}
<div class="container">
<nav>
<ul class="pagination justify-content-center">
{% if cur != 0 and cur != 10 %}
{% set url = "javascript:change(pn='" + (cur - 1) | string + "')" %}
{% else %}
{% set url = '#' %}
{% endif %}
<li class="page-item{% if cur == 0 %} disabled{% endif %}">
<a class="page-link" href="{{ url }}" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
{% if pages | length <= 10 %}
{% for i in pages %}
<li class="page-item{% if i == cur %} active{% endif %}"><a class="page-link" href="javascript:change(pn='{{ i }}')">{{ i + 1 }}</a></li>
{% endfor %}
{% endif %}
{% if cur < pages | length %}
{% set url = "javascript:change(pn='" + (cur + 1) | string + "')" %}
{% else %}
{% set url = '#' %}
{% endif %}
<li class="page-item{% if cur == pages | length - 1 or cur == 9 %} disabled{% endif %}"{% if cur == 9 %} data-toggle="tooltip" data-placement="top"{% endif %}>
<a class="page-link" href="{{ url }}" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
</div>
{% endblock %}

Answer 1

这是一种很有技巧的解决方案，但这会通过使框架比容器大来隐藏滚动条。

.outer {
width: 500px;
height: 150px;
overflow: hidden;
}
.outer iframe {
width: 520px;
height: 170px;
overflow: auto;
}

<div class="outer">

<iframe src="/"></iframe>
</div>