【问题标题】:Iframe horizontal scroll is always hiddeniframe 水平滚动始终隐藏
【发布时间】:2016-05-02 16:49:27
【问题描述】:

我的 iframe 的水平滚动始终是隐藏的,但我想在我的网页上看到它的 scroll-x。我不明白为什么 scroll-x 永远不会出现? scroll-y 确实出现了,但水平的没有出现。

有什么建议吗?

        <div class="row">
            <div class="col-sm-8 col-sm-push-4">
                <div class="embed-responsive embed-responsive-4by3">
                    <iframe class="embed-responsive-item"   src="http://fr.lichess.org/training/29058" style="overflow-x: scroll;"></iframe>
                </div>
            </div>
        </div>

【问题讨论】:

    标签: html css twitter-bootstrap iframe


    【解决方案1】:

    相关样式/​​类中的溢出

    在检查了 &lt;iframe&gt; 目标的 CSS 之后,看起来 &lt;body&gt; 似乎通过 overflow-x 属性明确限制了这一点,如下所示:

    此外,针对您的&lt;iframe&gt;embed-responsive 类也将限制这一点,因为它的overflow 属性完全隐藏:

    解决方案(如果您可以调整内页)

    但是,如果您明确删除 &lt;iframe&gt; 上的 overflow-x: scroll; 属性,它应该会按预期工作并将内页上的 overflow-x 属性设置为 auto

    /* Adjust this in your inner page (common.css, line 906) */
    body {
        /* Other styles omitted for brevity */
        overflow-x: auto;
    }
    

    然后您应该会看到它按预期工作:

    【讨论】:

    • 那么如果我的 iframe 的目标限制了 overflow-x 属性,我就无法解决问题?
    • 您是否有权调整目标页面的overflow-x 属性?这将是最简单的解决方案,因为该内页的 &lt;body&gt; 样式明确导致 overflow-x 属性被忽略。
    • 访问目标页面的overflow-x ?我不是那个象棋网站的站长。所以我无法访问该国际象棋网站的 CSS 属性。我希望我明白你在说什么......?
    • 我不知道您是否可以访问它。如果您不这样做,那么您将能够在网站上调整的内容非常有限。导致问题的样式需要被覆盖以避免这种情况,如果它与您的站点不在同一个域中,如果您尝试通过 Javascript 设置它(其中基本上是尝试解决它的一种非常骇人听闻的方式)。
    • 好的,那么我非常感谢您向我解释了所有问题。我选择了另一个目标网站在我的网站上嵌入国际象棋游戏。我接受你的回答祝你晚上好。
    【解决方案2】:

    .embed-responsiveoverflow 属性设置为 hidden

    .embed-responsive-item 没有 overflow 属性。

    试试这个:

    <div class="row">
        <div class="col-sm-8 col-sm-push-4">
            <div class="embed-responsive embed-responsive-4by3" style="overflow-x: scroll;">
                 <iframe class="embed-responsive-item" src="http://fr.lichess.org/training/29058"></iframe>
            </div>
         </div>
    </div>
    

    【讨论】:

      猜你喜欢
      • 2011-06-18
      • 2012-10-28
      • 1970-01-01
      • 1970-01-01
      • 2015-04-24
      • 2017-06-26
      • 2013-04-23
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多