如何在 iframe 中隐藏水平滚动条答案

【问题标题】：How to hide horizontal scroll bar in an iframe如何在 iframe 中隐藏水平滚动条
【发布时间】：2015-04-29 22:08:54
【问题描述】：

我有iframe 水平滚动，我想删除它。我怎样才能使它成为可能？只有水平滚动条：我希望它消失。我该怎么做？我尝试了很多例子，但没有一个对我有用。

<head>
    <title></title>
    <link href="menu.css" rel="stylesheet" type="text/css" />
    <script src="script/jquery-1.11.1.min.js"></script>
      
    <style>
        #iframe{
     width:790px;
     height:1000px; 
     background: #FFFFFF;
     overflow-y:scroll;
    
        }
    </style>
</head>
    <body>

        <div style="margin-left:auto;margin-right:auto">
          
               <ul class="dropdown">
                <li class="drop">
                    <a href="#">About us</a>

                </li>
                <li class="drop">
                    <a href="#">Contact us</a>

                </li>
                <li class="drop">
                    <a href="#">Services</a>

                </li>
                <li>
                    <a href="#">Address</a>
                </li>
            </ul>

        </div>

      <div id="div1" style="width:772px; height:auto; margin-left:auto;margin-right:auto">
          <iframe id="iframe" scrolling="no" frameborder="0"  onload="window.scrollTo(0, 0)" src="http://www.myhotels24.eu/fibe.aspx?hid=10000&chid=0&rate=IBE&css=brown" allowtransparency="true"></iframe>
         </div>  

    </body>

【问题讨论】：

删除scrolling并尝试。
我删除了它，但什么也没发生
你想达到什么目的，请尽量具体一点。
@d_z90 我需要水平消失而不是垂直
@ArindamNayak 我只需要水平消失而不是垂直消失。

标签： javascript jquery css iframe

【解决方案1】：

您的问题与 css 相关。代码应该是这样的：

#div1 {
    width: 772px;
    max-height: 200px;
    margin-left:auto; 
    margin-right:auto;
    overflow-y: scroll;
    overflow-x: hidden;
}

#iframe{
    width: 790px;
    height: 1000px; 
    background: #FFFFFF;
}

您遇到问题的原因是您应该为包含 iframe 的上层 div1 定义 overflow: scroll。如果你给它一个max-height 并定义overflow-y: scroll 和overflow-y: hidden 它可以正常工作。

这是jsfiddle。

【讨论】：