隐藏 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>