【问题标题】:Remove scrollbar from iframe从 iframe 中删除滚动条
【发布时间】:2012-04-22 08:29:58
【问题描述】:

使用此代码

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

它是这样显示的(http://www.talkjesus.com主页上的喊话框)

如何去掉水平滚动条,修改垂直滚动条的css?

【问题讨论】:

标签: html css iframe


【解决方案1】:

scrolling="no" 属性添加到 iframe。

【讨论】:

  • 可以用 css 做到这一点吗?
  • 是的,但是在 Chrome 中不能使用 scrollIntoView。见code.google.com/p/chromium/issues/detail?id=137214
  • 好吧,这隐藏了内容的滚动条,并防止滚动内容。它不会阻止 iframe 的滚动条出现。
  • iframe 上的滚动属性现已正式过时。应该改用 CSS。
  • @MikePoole 它可能已正式过时,但在 Chrome 65.0.3325.181 上设置 overflow:hidden; 无济于事,但 scrolling="no" 有帮助。
【解决方案2】:

这适用于所有浏览器

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>

【讨论】:

    【解决方案3】:

    在 iframe 上添加 scroll="no"style="overflow:hidden" 不起作用,我必须在 iframe 中加载的 html 文档的正文中添加 style="overflow:hidden"

    【讨论】:

    • 如果这有帮助,Firefox 中存在一个问题,如果你有一个元素 CSS transform: scale(0.7) 或类似的,这将创建滚动条(将显示在你的 iFrame 中),除非你剪辑它在祖先上使用overflow: hidden;(可以是 div 而不是 body)。
    • 那是因为它是'scrolling=no',而不是'scroll=no'。
    • 你的意思是装在我们里面装周围?周围是什么?
    • 加载在
    【解决方案4】:

    尝试添加scrolling="no" 属性,如下所示:

    &lt;iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'&gt;&lt;/iframe&gt;

    【讨论】:

      【解决方案5】:

      只需将 scrolling="no"seamless="seamless" 属性添加到 iframe 标记即可。像这样:-

       1. XHTML => scrolling="no"
       2. HTML5 => seamless="seamless"
      

      更新:

      seamless 属性已在所有主流浏览器中被删除

      【讨论】:

      • 无缝属性为removed from HTML
      • 你必须使用css而不是无缝属性。
      • @NimaRahbar 无缝属性可能已经过时,但是 css 不支持 iframe 参数。
      【解决方案6】:

      如果这里有人在禁用 iframe 上的滚动条时遇到问题,可能是因为 iframe 的内容在 html 元素下方元素上有滚动条!

      一些布局将htmlbody 设置为100% 高度,并使用#wrapper div 和overflow: auto;(或scroll),从而将滚动移动到#wrapper 元素。

      在这种情况下,除了编辑其他页面的内容之外,您所做的任何事情都不会阻止滚动条出现。

      【讨论】:

        【解决方案7】:
        <div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;
        

        使用上面的div,在任何浏览器中都不会显示滚动条。

        【讨论】:

        • seamless 属性不是有效的 HTML5,大多数浏览器不支持 (caniuse.com/#search=seamless),并且大多数其他样式都是不必要的。
        【解决方案8】:

        在你的 CSS 中添加这个来隐藏两个滚动条

        iframe 
        {
          overflow-x:hidden;
          overflow-Y:hidden;
        }
        

        【讨论】:

          【解决方案9】:
          iframe {
            display: block;
            border: none;         /* Reset default border */
            height: 100vh;        /* Viewport-relative units */
            width: calc(100% + 17px);
          }
          div {
            overflow-x: hidden;
          }
          

          这样,您可以使 iframe 的宽度大于应有的宽度。 然后用 overflow-x: hidden 隐藏水平滚动条。

          【讨论】:

            【解决方案10】:

            这是最后的手段,但值得一提:

            您可以使用 iframe 父级上的 ::-webkit-scrollbar 伪元素来摆脱那些著名的 90 年代滚动条。

            ::-webkit-scrollbar {
                width: 0px;
                height: 0px;
            }
            

            编辑:虽然是relatively supported::-webkit-scrollbar 可能并不适合所有浏览器。谨慎使用:)

            【讨论】:

            • 这是唯一对我有帮助的答案。您仍然可以滚动,但看不到丑陋的滚动条。谢谢!
            【解决方案11】:

            在你的 CSS 中:

            iframe{
                overflow:hidden;
            }
            

            【讨论】:

            • 谢谢,但仅水平滚动并且仍显示在 Firefox 中。不会出现在 Chrome 和 IE 中。此外,滚动条的 CSS 仅在 IE 中有效应用,而不是 FF 或 Chrome(后者显示默认的米色/阴影)。
            • 这不起作用,因为溢出发生在 iframe 文档中,由于跨域 iframe 安全限制,您通常无法修改。
            • 这不起作用,因为这不会影响 iframe 的内容,只会影响 iframe 本身。解决方案是 scrolling="no"。
            • 这是一个不正确的答案,不会删除谷歌浏览器中的滚动条,但 scrolling="no" 会。
            • 这个答案应该是不被接受的。这是一个错误的答案。
            【解决方案12】:

            在你的 CSS 中添加这个来隐藏水平滚动条

            iframe{
                overflow-x:hidden;
            }
            

            【讨论】:

              【解决方案13】:

              以上答案都不适合我。 这就是我在 JS 中所做的:

              选择 iframe 元素:

              var iframe_name = document.getElementById("iframe_name");
              

              为其添加属性:

                iframe_name.scrolling = "no";
              

              【讨论】:

                【解决方案14】:

                当什么都不起作用时,float:left 可以保护你。

                iframe{float:left;清除:两者;}

                【讨论】:

                  猜你喜欢
                  • 2013-07-24
                  • 2023-01-04
                  • 1970-01-01
                  • 2013-12-13
                  • 2019-09-05
                  • 2011-05-26
                  • 2016-05-11
                  • 2013-03-15
                  相关资源
                  最近更新 更多